Laravel 11 and React 18 Login and Registration tutorial with React Redux Toolkit
Introduction
In this tutorial, we will be setting up an indepth tutorial guide of react.js and laravel 11 system for user authentication and registration. We will be using typescript on the react.js frontned, along with react redux toolkit, but do not worry as youc an follow along even if you only know javascript. React redux toolkit helps with state management. It might be overkill for a simple login registration app like this, but makes life very easy once the app codebase grows. Users will be able to register using an email as their username and password. After successful registration, they shall be able to login. We wil demonstrate the login mechanism by having a userpforile area/route in the frontend of the application which will be locked and only accessible to logged in. The frontend and backend will be on different domains, so the after logging in, we will provide the user with a token, which will be stored in localstorage of the browser. This will be send along in the header each request which requires authentication to get data back from the server. We will also need to setup cors so that our frontend domain can send requests to the backend domanin app.
What is Cross Origin Resource Sharing and when to use it?
The Problem
When developing highly ajax enabled applications using javascript, you may not always be fortunate to have both the client and server side of the application be hosted on the same domain. You might be asking, what does this mean? Good question.
I am confident that you know what a domain is. If not, then have a quick look here at the wikipedia article. Ok, so lets say you have a domain named http://www.mydomain.com.
