Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/qirolab/nuxt-sanctum-authentication-demo
https://github.com/qirolab/nuxt-sanctum-authentication-demo
laravel nuxt nuxt-auth nuxt-module nuxt3 sanctum sanctum-authentication sanctum-spa
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/qirolab/nuxt-sanctum-authentication-demo
- Owner: qirolab
- Created: 2024-09-27T13:31:40.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2024-10-28T18:28:42.000Z (2 months ago)
- Last Synced: 2024-10-28T19:38:41.286Z (about 2 months ago)
- Topics: laravel, nuxt, nuxt-auth, nuxt-module, nuxt3, sanctum, sanctum-authentication, sanctum-spa
- Language: PHP
- Homepage: https://qirolab.com/posts/set-up-nuxt-3-authentication-with-laravel-sanctum
- Size: 178 KB
- Stars: 2
- Watchers: 0
- Forks: 4
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Nuxt Sanctum Authentication Demo
This repository contains the source code for both a **Laravel** application and a **Nuxt 3** application demonstrating authentication with **Laravel Sanctum**.
This demo walks through setting up Sanctum authentication, including both cookie-based and token-based authentication methods.
## Features
- Laravel backend with Sanctum authentication.
- Nuxt 3 frontend configured with [`@qirolab/nuxt-sanctum-authentication`](https://github.com/qirolab/nuxt-sanctum-authentication "`@qirolab/nuxt-sanctum-authentication`") module.
- SPA cookie-based authentication (default) and token-based authentication.
- API route protection using Sanctum.
## Tutorial
For a step-by-step guide, watch the full tutorial on YouTube:
## Branches
This repository contains two different branches depending on the type of authentication you want to implement:
- **Cookie-Based SPA Authentication**: The default authentication mode using Laravel Sanctum cookies. You can check out the main branch for this implementation.
- Branch: `main`
- **API Token-Based Authentication**: If you prefer to use token-based authentication for your API, switch to the `api-token-authentication` branch.
- Branch: `api-token-authentication`
Make sure to check out the correct branch depending on your use case.
## Installation
### 1. Clone the repository
```bash
git clone [email protected]:qirolab/nuxt-sanctum-authentication-demo.git
```
### 2. Setup Laravel
Navigate to the Laravel folder and install dependencies:
```bash
cd laravel-api
composer install
```
Copy the `.env.example` to `.env`:
```bash
cp .env.example .env
```
Generate the application key:
```bash
php artisan key:generate
```
Set up your database in the `.env` file and run migrations:
```bash
php artisan migrate
```
Run the Laravel server:
```bash
php artisan serve
```
### 3. Setup Nuxt 3
Navigate to the Nuxt app folder and install dependencies:
```bash
cd nuxt3-app
npm install
```
Copy the `.env.example` to `.env`:
```bash
cp .env.example .env
```
Make sure to set the `NUXT_SANCTUM_API_URL` in your `.env` file to point to your Laravel app URL.
Run the Nuxt development server:
```bash
npm run dev
```
## Usage
- Open the Laravel app in your browser (default: `http://localhost:8000`).
- Open the Nuxt app in your browser (default: `http://localhost:3000`).
- Try logging in using the credentials you've set up in your Laravel app.
## Support
If you found this demo helpful and want to support my work, check out some of my other products:
---
#### Get $200 free credit for DigitalOcean! (Use this link to sign up)
[](https://www.digitalocean.com/?refcode=e740238537d0&utm_campaign=Referral_Invite&utm_medium=Referral_Program&utm_source=badge)
## License
This project is open-sourced software licensed under the [MIT license](https://opensource.org/licenses/MIT).