Authentication

Introduction

This starter kit uses Logto (opens in a new tab) for authentication. It is a feature-rich 3rd-party authentication provider that supports multiple authentication methods, including email, password, and social providers.

Logto Authentication Setup

1. Create a Logto account if you don't have one already.
2. Create a tenant (any tenant name and data region should be fine).
3. Create your sign-in experience.
   • For Identifier, choose Email address, because Username is not included in this starter kit at this time.
   • For Password, you can choose any combination of Password and/or Verification code.
   • For Social sign-in, choose the social provider of your choice, if any.
   • For our example, we will be choosing Email address, Password, Verification code, and Github.
   
4. In the Logto console, go to Applications > Next.js (App Router) > Start building. Fill in the application details and click Create application.
5. Scroll down to 2. Prepare configs. Update the .env.local file with your Logto configuration values accordingly (see image below for the environment variables).
   • Your .env.local file should now look something like this:
   .env.local

   # Next.js
   BASE_URL=http://localhost:3000
   
   ...
   
   # Logto Auth Config
   LOGTO_ENDPOINT=https://l47p1g.logto.app/
   LOGTO_APP_ID=j3t5tgt4c1odwtf5i67e5
   LOGTO_APP_SECRET=w8Jfb0tuGpHe70maH9oHBDNfzziwsOcr
   LOGTO_COOKIE_SECRET=qlrqzvEG13fYUcdcIFIvxYVLDucIg6cr
6. Scroll down to 3. Configure Redirect URIs.
   1. For the Redirect URI field, enter http://localhost:3000/callback and click Save.
   2. For the Post sign-out redirect URI field, enter http://localhost:3000 (no trailing backslash!) and click Save.
      • Note: Having a trailing backslash at the end (e.g. http://localhost:3000/) will cause sign-outs to fail.
   3. Then click Finish and done.
   
7. Now restart your development server by going to your terminal, pressing Ctrl+C to stop the server, and then running pnpm dev to start the server again. Restarting the server will activate the Logto configuration.
8. Now in the home page of your app, click the Sign Up button and try to create a new account. Once you have created an account, the app should redirect you to the dashboard page. Signing out should redirect you to the home page of your app.

Logto Management API Setup

The Logto Management API is used by the starter kit to interact with Logto via API. Follow the steps below to get it set up.

1. In the Logto console, go to Applications and click the + Create application button in the top right.
2. Scroll down to Machine-to-machine and click Start building. Then fill in the application details and click Create application.
3. Check the box next to Logto Management API access role and click the Assign roles button.
4. Scroll down to 2. Basics about access token request. Update the .env.local file with app ID and app secret (see image below for the corresponding environment variables). Afterwards, click Finish and done.
   • Your .env.local file should now look something like this:
   .env.local

   ...
   # Logto API Config
   LOGTO_M2M_APP_ID=su9l5pz27kgyp9quiavxy
   LOGTO_M2M_APP_SECRET=<app_secret>
5. Now restart the development server in your terminal to activate this new configuration.
6. You can now test the Logto API by logging in to your starter kit app, going to the Account page, and changing the user's email address or password. Behind the scenes, your app should be able to successfully connect to the Logto Management API to make the changes.

Next Steps

🚀 Congratulations, you've successfully set up authentication! Proceed to the next page to continue with setup.