Image for post
Image for post
Photo by Chepe Nicoli on Unsplash

For web developers, it’s important for us to authenticates our users via API Request. In Laravel itself, besides its full-stack development, we have many options on how to authenticate the requests. For example, we have the Laravel Passport package to do the authentication and OAuth processes. But, if you don’t want to use the OAuth feature that Passport offers, then the Laravel Sanctum may be a choice for you.

What is Laravel Sanctum?

Laravel Sanctum provides a featherweight authentication system for SPAs (single page applications), mobile applications, and simple, token based APIs (https://laravel.com/docs/8.x/sanctum)

Yes, in Sanctum, we have two options here. The first is the API Token Authentication, and the second is SPA Authentication. There is another authentication such as Mobile Applications, but this authentication has a similar process to API Token Authentication. …


Image for post
Image for post
Photo by Giftpundits.com from Pexels

Are you a developer? If yes, I’m sure that you must always add some packages/libraries to your project. I’m a Laravel developer, maybe you too. And inside Laravel, we have so many useful packages that ready to use, make life easier for us. What do you need? Do you want an API Authentication? You have Laravel Passport/Sanctum. Need a monitoring queue job? You have Horizon. Or maybe other packages from other developers/companies like Spatie Laravel Permission for managing roles and permissions. And trust me, there are so many more packages that useful for our projects. Just a little tip from me, if you want to build something for your client/company’s need, maybe it’s best for you to find first the package that fulfills your needs. …


Image for post
Image for post
Image from https://laravel-livewire.com

Are you’re a Laravel developer? If so, what comes in your mind if I said about the “Laravel Front-end”? The blade files? Static interfaces? or something else? Yeah, Laravel is an excellent tool for building full-stack development, but the front-end itself is a static one. As you might know, the Laravel front-end is being rendered by the server and cannot be changed on the client-side, so that the pages/interfaces are static if we are using the pure Laravel front-end/blade files.

Here it comes! The good news is, we can use various JS frameworks/libraries inside the blade files. So, as a full-stack developer, we can create better and dynamic interfaces because today, people/your users will choose the dynamic one. You can use vanilla JS, JQuery, or the most popular one, such as Vue.JS or React. But of course, learning a front-end framework (mostly using Javascript) like Vue.JS requires a learning curve. Take an example of VueJS. It’s a very excellent front-end framework! (I’ve created some articles about Laravel & Vue if you’re curious). But it would be best if you had a deep understanding of using it in a real-life project. As I said before, it requires you to learn how VueJS, the API that Vue has, or maybe you need to learn the Javascript itself. So the next question, is there a tool where we can build dynamic interfaces/pages without coding any Javascript thing? …


Image for post
Image for post
Photo by Balázs Kétyi on Unsplash

In real life mobile application projects, we usually need to implement some authentications inside our app. To achieve this, we need some approaches so that the app can have the ability to not only asking about the email and password from the users but also need to store the necessary information that we may use it inside our app later. For example, when the app sends a request to the server to authenticate the users, the server may send back the necessary information of the users, such as the first name, last name, gender, etc. …


Image for post
Image for post
Photo by Remi Moebs on Unsplash

What will you do first when you’re installing a bare new React Native project? I guess it’s all about the boilerplate codes, right? At least, you’re preparing the navigation because, as we all know, navigation is the thing that must be there. So, you’ll search the React Navigation docs, do some installations, and make some changes in your app. Yeah, there are so many navigation libraries that need to be installed so that we cannot memorize all of them, at least me.

In this post, I’ll make some boilerplates for implementing React Navigation 5 in a new React Native project. So, in the future, we don’t have to search the Navigation docs again and again. What we only need to do is forking/cloning our existing boilerplate repository and just use it! And if you’re wondering on how to implement React Navigation 5 (Stack Navigator) into the React Native project, you’ve come to the right place! …


Image for post
Image for post
Photo by Pixabay from Pexels

Building such a complicated form on your website requires an understanding of how to implement various elements in a form. The fundamental elements that can be found in almost every form are the input, checkbox, and radio button elements. But let’s say you have a Blog app and need to build a form where you can create a post there. Also, you
need a file uploader element to upload an image to become the featured image of the post. Or, you need to create a file uploader for your users so that they able to upload some files to your website. So, what’re you thinking? Maybe you feel that the file uploader is an uncommon element because we rarely used it. Even more, implementing the drag and drop feature in a file uploader is very complex and needs deep understanding. If you think that, then you’ve come to the right post! This post will show you how to create a file uploader using the Dropzone library with the drag and drop feature and integrate it with the Vue component. …


Image for post
Image for post
Photo by Christopher Gower on Unsplash

Building a large-scale web application is very complicated. You and your teammates must pay attention to either big or little details so that your app works well. Plus, it would be best if you considered several things when typing some codes there. For example, is your code reusable? So that your teammates can use your code/functions you typed. Or is your code is scalable enough? So it would be much easier to maintain and make an improvement later. Yes, you know what I mean, we must think ahead. But remember, as a general rule of thumb from Jeffrey Way in one of his videos in Laracast, you don’t need to refactor the code unless it’s necessary. If you’re building a simple web application, then maybe leave it as simple as possible is the best choice. …


Image for post
Image for post
Photo by מתן שגב from Pexels

What do you know about reCaptcha? I mean, every developer would understand why we use reCaptcha on our websites. It protects our sites from the bot and ensures that only humans can be in our sites. From Google’s documentation, it has a very explicit explanation:

reCAPTCHA protects you against spam and other types of automated abuse. -developers.google.com

Usually, we use this reCaptcha on our login/register page or a form that we want to protect. But actually, we can extend this usability in every button/action we want to protect. In reCaptcha version 3, we can get a score and can determine the threshold by ourselves. Then, we can do whatever we like when somebody/something below the threshold we defined. …


Image for post
Image for post
Photo by Miguel Á. Padriñán from Pexels

WYSIWYG is a pretty interesting concept where a publication is come out exactly of what we see when editing. That’s why the term WYSIWYG (What You See Is What You Get, /ˈwɪziwɪɡ/ WIZ-ee-wig) is quite often used for web applications such as forums, blogs, etc.

Now, implementing WYSIWYG is easy because there are so many tools/packages ready for it, for example, Trix Editor, Tiny, MooEditable, Froala, Quill, and many more. Of course, to implement this into our Laravel project, we have several steps/initial preparations to be done first. In this article, I’ll implement Quill package in the Vue Component to the fresh installation Laravel project. If you ask me, why do we want the Vue component? The answer is easy. When we’re using Vue, it’ll be more seamless (and a lot of flexibility), and not many articles out there that cover the Quill installation into the Vue Components. …


Image for post
Image for post
Image from https://github.com/laravel/passport

When you are building a web application with Laravel, authenticating your user is a crucial step because we don’t want an unauthenticated user to do something malicious in our app or do something we don’t expect to. You should always protect your routes with the authentication middleware, or if you want to take a step further, you can protect it with the authorization as well.

It’s easy to authenticate users with the traditional login forms because we have session states between requests that we can maintain. Take a look at my article here if you want to know how we can authenticate users with traditional login forms using laravel/ui package. But, how about authenticating users using the API? …

About

Cerwyn Cahyono

PHP/Backend Engineer at Undercurrent Capital Pte Ltd — Data Science Enthusiast

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store