laravel 9 authentication with next js example

In this section we will see how to authentication in laravel 9 with Next JS. Laravel breeze provide auth api, So it easy to setup laravel sanctum auth api, For nextjs frontend we will use breeze next js kit.


Setup Laravel Authentication API

Create laravel project

composer create-project Laravel/laravel laravel-auth-api  

Setup your .env file

.env

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=database_name
DB_USERNAME=database_user_name
DB_PASSWORD=database_password


Install Laravel Breeze

composer require laravel/breeze --dev

Install laravel breeze api command to create auth api.

php artisan breeze:install api

After install breeze api, you can see .env file two url for backend and frontend. You can change url in production, for local leave it.

.env

APP_URL=http://localhost:8000
FRONTEND_URL=http://localhost:3000

run project and leave it.

php artisan serve  

Note: Open two terminal one for run laravel application & second to create nextjs project and run.


Setup Next js Auth Frontend

You need to just clone or download breeze-next repo.

You need to clone or download breeze-next .

Clone breeze-next repository

run below command to clone repo. you can check repository link.

git clone https://github.com/laravel/breeze-next.git  


Install npm dependencies.

npm install

Copy env file

cp .env.example .env 

.env

you can change url in production.

NEXT_PUBLIC_BACKEND_URL=http://localhost:8000

run next js project

npm run dev


Next js register page

http://localhost:3000/register

next js auth register page

next js auth register page

Next js login page

http://localhost:3000/login

next js auth login page

next js auth login page


Next js dashboard page

http://localhost:3000/dashboard

next js auth dashboard page

next js auth dashboard page


Read Also

Laravel 9 Add Simple Sidebar with Tailwind CSS Example

How to Use Carousel Slider in Laravel 9 Example

Laravel 9 Posts with Tags Many to Many Relationships Example

Laravel 9 Insert Category in Posts CRUD Example

How to Use Ckeditor 5 in Laravel 9 Vite with Tailwind CSS

Laravel 9 Simple Image Upload in Ckeditor 5 Example

Laravel 9 Flash Message Timeout and Hide Message Example

Install & Setup Markdown Editor in Laravel 9

Nuxt 3 Data Fetching Using Laravel 9 Api Example

Laravel 9 Image Upload with Preview using Tailwind CSS & Alpine JS

Laravel 9 with Tailwind CSS Form Validation Example

Laravel 9 Backend Api Connect with Vue 3 Using Axios Example

Laravel 9 Rest Api with Vue 3 Composition Api CRUD Example

Laravel 9 Authentication with Next js Example

Laravel 9 Sanctum Authentication with Nuxt JS Example

Laravel 9 Simple Search with Pagination Example

Laravel 9 Install Setup TALL(Tailwind, Alpinejs, Livewire) Admin Panel

How to Fix and Clean Code Style in laravel 9

Laravel 9 Image File Upload Example

3 Way to Create Slug in Laravel 9 without Package

How to Add Dark Mode in Laravel 9 with Tailwind CSS