How to Use Laravel Sanctum for API Authentication with React
Are you trying to implement API authentication for your Laravel application using React as the frontend framework? If so, you're in the right place. In this comprehensive guide, we will show you how to use Laravel Sanctum, a simple package for API authentication, with a React frontend. By the end of this tutorial, you will have a solid understanding of how to secure your API routes and authenticate users in your application.
Setting Up Laravel Sanctum
Before we dive into the integration with React, let's first set up Laravel Sanctum in your Laravel backend. If you haven't already installed Sanctum, you can do so by running the following command in your terminal:
Bash
Next, you will need to publish the Sanctum configuration file by running:
Bash
After publishing the configuration file, run the migration to create the necessary tables for Sanctum:
Bash
With Sanctum installed and configured, you can now proceed to set up your API routes and authentication system.
Creating API Routes
In your Laravel application, define the routes that you want to protect using Sanctum. You can do this by adding the auth:sanctum middleware to your routes in the api.php file:
Php
This route will return the authenticated user when accessed by an authenticated request.
Authenticating Users
To authenticate users in your React frontend, you need to set up the authentication logic using Sanctum's token-based system. When a user logs in, you can issue a token that they can use to access protected routes.
In your Laravel controller, you can authenticate users by verifying their credentials and issuing a token:
Php
This code snipped attempts to authenticate the user using the provided credentials and returns a token if successful.
Making API Requests in React
Now that you have set up API authentication in Laravel, let's look at how you can make authenticated API requests from your React frontend.
When a user logs in to your React application, you should store the token in local storage or a cookie for future requests. Here is an example of how you can send an authenticated request using Axios in React:
Javascript
In this code snippet, we are adding the token to the request headers before making the API call. This ensures that the user is authenticated when accessing the protected route.
Keeping Users Logged In
To keep users logged in across sessions, you can store the token in a secure way in your frontend application. You can use libraries like redux-persist to persist the token in your React store.
By storing the token securely, users won't have to log in every time they visit your application, providing a seamless user experience.
Logging Out Users
When a user logs out of your React application, make sure to invalidate the token on the backend to prevent any unauthorized access. In your Laravel controller, you can revoke the user's token:
Php
By revoking the token, the user will no longer be able to access protected routes using the old token.
Testing the Implementation
To ensure that your authentication system is working correctly, test the endpoints with tools like Postman or Insomnia. Send requests to the protected routes with a valid token and verify that the response is as expected.
By thoroughly testing your implementation, you can catch any potential issues before deploying your application to production.
Recap
In this tutorial, we explored how to use Laravel Sanctum for API authentication with a React frontend. We covered setting up Sanctum in your Laravel backend, creating protected API routes, authenticating users, making authenticated API requests in React, keeping users logged in, logging out users, and testing the implementation.
By following the steps outlined in this guide, you can ensure that your application is secure and user-friendly. Laravel Sanctum provides a simple and effective way to authenticate users in your API, while React offers a powerful frontend framework for building dynamic web applications.
Whether you are building a small personal project or a large-scale enterprise application, incorporating Laravel Sanctum and React can help you create a robust and secure system for your users. So go ahead, implement API authentication in your Laravel React application, and take your project to the next level!
