How to Use AuthJS in Astro
This article is for version
auth-astro. For new projects, check out the latest version of the adapter for a new and improved experience.
With the release of Astro 2.0 it seems a good a time as any to announce the unofficial community prerelease of an Auth.js Astro adapter! Let’s dive in, and implement authentication in a new Astro project.
Create a new Astro project, with the default/recommended options:
Install the unofficial Astro adapter & the core for Auth.js, along with a platform adapter for Astro (e.g. @astrojs/node):
astro.config.mjs and change the
Next, we need to configure the authentication providers we want to use. For this demo, we’ll use GitHub. Create a new file at
src/routes/api/auth/[...astroAuth].ts and add the following code:
The exported request handlers will process the callback from the OAuth provider and handle the authentication. The
clientSecret are passed in as environment variables. We’ll set these up next.
Go to GitHub’s developer settings and create a new OAuth app. Set the callback URL to
http://localhost:3000 part is the default URL for Astro. If you’re using a different port, or are deploying your app, you’ll need to change this. You’ll also need to set the
Homepage URL to
http://localhost:3000. Save the client ID and client secret for the next step.
Configure Environment Variables
Next, we need to configure the environment variables. Create a new file in the root of the project called
.env and add the following, replacing the placeholders with your own values.
AUTH_SECRET must be a random string of 32 characters. The documentation suggests on Linux, you generate one using
openssl rand -hex 32, or you can navigate to generate-secret.vercel.app to generate one in the browser.
Fetching the Session & Logging In
To know if a user is authenticated, we need to fetch the session data. Navigate to
src/routes/index.tsx and import the
Auth context provider. Wrap the
Layout in the
Auth component, and pass in the
authOpts we created in the API route. The child element of
Auth should be a JSX method, taking the
session as a parameter. This will be called with the session data, or
null if the user is not authenticated. We can use this to display a login button, or the user’s name.
Signout components are provided by the adapter, and will handle the authentication flow. The
Signin component takes a
provider prop, which should match the name of the provider you configured in the API route. The
Signout component will log the user out. Both are optional, and you can implement your own login and logout flows using the
signOut methods from
getSession method from
auth-astro, we can fetch the session data in a protected route. Navigate to
src/routes/protected.tsx and if the session is
null, redirect to the home page. Otherwise, display the user’s name.
That’s all there is to it! You can now run the project with
npm run dev and try out the authentication flow. You can also deploy the project to Vercel, and use the Vercel adapter to link it to your GitHub account. You can find the source code for this demo here.
Thanks for reading! If you have any questions, feel free to reach out to me on Twitter or hop into my Discord.