Learn how to build a user authentication flow with Nuxt by integrating Logto SDK.
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.
Before you begin, ensure you have the following:
To get started, create a Logto application with the "Traditional web" type. Follow these steps to create a Logto application:
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.
Install Logto SDK via your favorite package manager:
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.
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:
/sign-in), sign-out (/sign-out), and callback (/callback).useLogtoClient and useLogtoUser.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.
To display the user's information, you can use the useLogtoUser() composable, which is availble on both server and client side:
Now you can run the application and try to sign-in/sign-out with Logto:
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!