Logto
Introduction
This starter kit provides Logto as an option for authentication, with Lucia v3 (the old version) as the middleman to connect Logto with Astro. Logto is a feature-rich 3rd-party authentication provider that supports multiple authentication methods, including email, password, OTP, and social providers.
Logto Authentication Setup
- Create a Logto account if you don’t have one already.
- Create a tenant (any tenant name and data region should be fine).
- 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.
- In the Logto console, go to Applications. Then, scroll down to the bottom and click View all ->. Then at the bottom right, click Create app without framework. Select Traditional Web and fill in the application details and click Create application.
- Under Redirect URIs, enter
http://localhost:4321/callback
. Under Post sign-out redirect URIs, enterhttp://localhost:4321
(no trailing backslash!). Then click Save changes.- Note: Having a trailing backslash at the end (e.g.
http://localhost:4321/
) will cause sign-outs to fail.
- Note: Having a trailing backslash at the end (e.g.
- Scroll down to the Endpoints & Credentials section. Update the
.env
file of your project with your Logto credentials (see image below for the environment variables).- Your
.env
file should now look something like this:
- Your
- Now in the home page of your app, you can test authentication by clicking the Sign Up button and creating 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.
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.
- In the Logto console, go to Applications and click the + Create application button in the top right.
- Scroll down to Machine-to-machine and click Start building. Then fill in the application details and click Create application.
- Check the box next to Logto Management API access role and click the Assign roles button.
- Scroll down to 2. Basics about access token request. Update the
.env
file with app ID and app secret (see image below for the corresponding environment variables). Afterwards, click Finish and done.- Your
.env
file should now look something like this:
- Your
- 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.