Build Nuxt authentication with Logto
Learn how to build a user authentication flow with Nuxt by integrating Logto SDK.
Founder
Get started
Introduction
- Logto is an open-source Auth0 alternative for building identity infrastructures. It supports various sign-in methods, including username, email, phone number, and popular social sign-ins like Google and GitHub.
- Nuxt an open source framework that makes web development intuitive and powerful.
In this tutorial, we will show you how to build a user authentication flow with Nuxt by integrating Logto SDK. The tutorial uses TypeScript as the programming language.
Prerequisites
Before you begin, ensure you have the following:
- A Logto account. If you don't have one, you can sign up for free.
- A Nuxt development environment and a project.
Create a Logto application
To get started, create a Logto application with the "Traditional web" type. Follow these steps to create a Logto application:
- Sign in to the Logto Console.
- In the left navigation bar, click on Applications.
- Click on Create application.
- In the opened page, find the "Traditional web" section and locate the "Nuxt" card.
- Click on Start building, and input the name of your application.
- Click on Create.
Then you should see an interactive guide that guides you through the process of integrating Logto SDK with your Nuxt application. The following content can be a reference for future use.
Integrate Logto SDK
Installation
Install Logto SDK via your favorite package manager:
Register Logto module
In your Nuxt config file (nuxt.config.ts), add the Logto module:
The minimal configuration for the module is as follows:
Since these information are sensitive, it's recommended to use environment variables:
See runtime config for more information.
Implement sign-in and sign-out
Configure redirect URIs
Switch to the application details page of Logto Console. Add a Redirect URI http://localhost:3000/callback.
Redirect URI is an OAuth 2.0 concept which implies the location should redirect after authentication.
Similarly, add http://localhost:3000/ to the "Post sign-out redirect URI" section.
Post Sign-out Redirect URI is an OAuth 2.0 concept which implies the location should redirect after signing out.
Then click "Save" to save the changes.
When registering @logto/nuxt module, it will do the following:
- Add three routes for sign-in (
/sign-in), sign-out (/sign-out), and callback (/callback). - Import two composables:
useLogtoClientanduseLogtoUser.
These routes are configurable via logto.pathnames in the module options, for example:
Check out the type definition file in the @logto/nuxt package for more information.
Since Nuxt pages will be hydrated and become a single-page application (SPA) after the initial load, we need to redirect the user to the sign-in or sign-out route when needed.
Display user information
To display the user's information, you can use the useLogtoUser() composable, which is availble on both server and client side:
Checkpoint: Run the application
Now you can run the application and try to sign-in/sign-out with Logto:
- Open the application in your browser, you should see the "Sign in" button.
- Click the "Sign in" button, and you should be redirected to the Logto sign-in page.
- After you have signed in, you should be redirected back to the application, and you should see the user data and the "Sign out" button.
- Click the "Sign out" button, and you should be redirected to the Logto sign-out page, and then redirected back to the application with an unsigned-in state.
If you encounter any issues during the integration, please don't hesitate to join our Discord server to chat with the community and the Logto team!