Astro JS - Authentication

Quiz

What is Authentication?

Authentication is the process of verifying the identity of a user. It is used to ensure that the user is who they claim to be. In web applications, authentication is done by verifying the user's credentials, such as username and password. The authentication process has following three steps:

Take user's credentials
Validate the credentials
Verify the credentials with database

Authorization is a part of authentication, which determine whether a user is allowed to access a particular resource such as a page, route or an API endpoint in a web application. Once the user is logged in, the authorization logic will determine what actions the user is allowed to perform.

Authentication in Astro

Astro provides a built-in authentication system that allows developers to easily implement authentication in their applications. Astro provides framework agnostic solutions such as Auth.js, Better-Auth, and Astro Auth. These solutions are designed to work with any integrated Astro frameworks, such as React, Vue, Svelte, and Preact. Astro supports following tools for authentication:

Auth.js
Better-Auth
Clerk

Setup Auth.js

Auth.js is a authentication library that provides a simple and secure way to implement authentication in web applications. It is designed to work with any JavaScript framework, integrated with Astro. It provides a set of APIs and components which makes it easy to implement authentication in your application. Let's take a look at how to implement authentication using Auth.js in Astro.

Step 1: Install Auth.js

To get started with Auth.js, you need to install the auth.js package in your Astro project. You can do this by running the following command:

>> npx astro add auth-astro

This command will install the auth-astro package and add it to your Astro project. If you are manually installing the package, you may need to set up astro config to use auth-astro package. Add the following code to your astro config file.

// File - astro.config.mjs

import { defineConfig } from 'astro/config';
import auth from 'auth-astro';

export default defineConfig({
  // ...
  integrations: [auth()],
});

Step 2: Configure Auth.js

After installing Auth.js, you need to configure it in your Astro project. Create an auth.config.ts file in your projectâs root directory. Add any auth providers or methods you wish to support, along with any environment variables they require.

// File - auth.config.ts

import GitHub from '@auth/core/providers/github';
import { defineConfig } from 'auth-astro';

export default defineConfig({
  providers: [
    GitHub({
      clientId: import.meta.env.GITHUB_CLIENT_ID,
      clientSecret: import.meta.env.GITHUB_CLIENT_SECRET,
    }),
  ],
});

Create a .env file in the root of your project if it does not already exist. Add the following two environment variables. AUTH_SECRET should be a private string with a minimum of 32 characters.

# File - .env

AUTH_SECRET=your_secret_key
GITHUB_CLIENT_ID=your_github_client_id
GITHUB_CLIENT_SECRET=your_github_client_secret

Make sure to replace the values of GITHUB_CLIENT_ID and GITHUB_CLIENT_SECRET with your actual GitHub client ID and secret. You can obtain these values by creating a new OAuth application in your GitHub account settings.

Step 3: Usage

After configuring Auth.js, you can use it in your Astro components and pages. Add sign-in and sign-out buttons using the auth-astro/client module in a script tag or client-side framework component and you can fetch the userâs session using the getSession method.

// File - src/pages/index.astro

---
import Layout from 'src/layouts/Base.astro';
---
<Layout>
  <button id="login">Login</button>
  <button id="logout">Logout</button>

  <script>
    const { signIn, signOut } = await import("auth-astro/client")
    document.querySelector("#login").onclick = () => signIn("github")
    document.querySelector("#logout").onclick = () => signOut()
  </script>
</Layout>

In the above example, we are using the signIn and signOut methods to handle user authentication. When the user clicks the login button, they will be redirected to the GitHub login page. After successful authentication, they will be redirected back to your application.

To fetch the userâs session, you can use the getSession method. This method returns the userâs session object, which contains information about the authenticated user.

// File - src/pages/index.astro

---
import Layout from 'src/layouts/Base.astro';
import { getSession } from 'auth-astro/server';

const session = await getSession(Astro.request);
---
<Layout>
  {
    session ? (
      <p>Welcome {session.user?.name}</p>
    ) : (
      <p>Not logged in</p>
    )
  }
</Layout>

In the above example, we are using the getSession method to fetch the userâs session. If the user is logged in, we display a welcome message with their name. If the user is not logged in, we display a message indicating that they are not logged in.

Setup Better-Auth

Better-Auth is a simple and easy to use authentication library for Astro. It provides a set of APIs and components that make it easy to implement authentication in your application. Better-Auth is designed to work with any JavaScript framework, integrated with Astro. It provides a set of APIs and components which makes it easy to implement authentication in your application. Let's take a look at how to implement authentication using Better-Auth in Astro.

Step 1: Install Better-Auth

To get started with Better-Auth, you need to install the better-auth package in your Astro project. You can do this by running the following command:

>> npx astro add better-auth

This command will install the better-auth package and add it to your Astro project.

Step 2: Configure Better-Auth

After installing Better-Auth, you need to configure it in your Astro project. Create an auth.config.ts file in your projectâs root directory. Configure your database table to store user data and your preferred authentication methods. Then, youâll need to mount the Better Auth handler in your Astro project.

// File - auth.config.ts

import { auth } from "../../../lib/auth"; // import your Better Auth instance
import type { APIRoute } from "astro";

export const ALL: APIRoute = async (ctx) => {
  return auth.handler(ctx.request);
};

In the above example, we are importing the auth instance from the lib/auth file and mounting the Better Auth handler in our Astro project. This will allow us to use Better Auth in our Astro project.

Step 3: Usage

After configuring Better-Auth, you can use it in your Astro components and pages. Better Auth offers a createAuthClient helper for various frameworks, including Vanilla JS, React, Vue, Svelte, and Solid. For example, to create a client for React, import the helper from 'better-auth/react':

import { createAuthClient } from 'better-auth/react';

export const authClient = createAuthClient();

export const { signIn, signOut } = authClient;

Once your client is set up, you can use it to authenticate users in your Astro components or any framework-specific files. The following example adds the ability to log in or log out with your configured signIn() and signOut() functions.

// File - src/pages/index.astro

---
import Layout from 'src/layouts/Base.astro';
---
<Layout>
    <button id="login">Login</button>
    <button id="logout">Logout</button>

    <script>
        const { signIn, signOut } = await import("./lib/auth-client")
        document.querySelector("#login").onclick = () => signIn.social({
        provider: "github",
        callbackURL: "/dashboard",
        })
        document.querySelector("#logout").onclick = () => signOut()
    </script>
</Layout>

Print Page