Light-Auth: A lightweight auth. sdk for SSR frameworks

Light-Auth is a lightweight authentication solution designed for simplicity and ease of integration.

It provides essential authentication features with minimal configuration, making it ideal for small projects, prototypes, or applications that require straightforward user sign-in functionality.

Features

• Simple setup and configuration
• Supports basic authentication flows
• Minimal dependencies
• Easily extensible for custom requirements
• Server side an Client side components

Framework Compatibility

Light-Auth shines across your favorite frameworks! Whether you’re building with:

Framework	NPM Package	GitHub Sample
Next.js	light-auth-nextjs	Next.js Sample
Astro	light-auth-astro	Astro Sample
Nuxt	light-auth-nuxt	Nuxt Sample
SvelteKit	light-auth-sveltekit	SvelteKit Sample
Express	light-auth-express	Express Sample
Tanstack Start	light-auth-tanstack-react-start	Tanstack Start Sample

Light Auth integrates seamlessly, letting you add authentication with a sparkle ✨ to any stack!

Getting Started

This getting started is based on the light-auth-nextjs package.

You will find examples for all others frameworks in each relevant repository

The Light Auth documentation has also a lot of code examples for various scenario.

1) Installing Light Auth

npm -i @light-auth/nextjs

2) Configuring Light Auth

Light-Auth is using Arctic providers: Arctic is a collection of OAuth 2.0 clients for popular providers.

You will find the complete list of Arctic providers on the official website: Arctic v3

Each provider needs to be configure, usually with a ClientId, a Client Secret and a Redirect URI.

As an example, we are going to use a Google provider.

Note that Light-Auth can use multiple providers, but for sake of simplicity, we are going to use only one here.

Once you have configure your Google OAUTH2 from the google admin console, add a .env file at the root of your project:

GOOGLE_CLIENT_ID=<your_client_id_from_google_cloud>
GOOGLE_CLIENT_SECRET=<your_client_secret_from_google_cloud>
GOOGLE_REDIRECT_URI=http://localhost/api/auth/callback/google

LIGHT_AUTH_SECRET_VALUE=<any_random_secret_used_to_secure_server_cookies>

LIGHT_AUTH_SECRET_VALUE value is used to encrypt cookies, and is mandatory.

Now, you can add a new file to configure Light-auth.

The results from the CreateLightAuth call will be used everywhere else to allow you to login, logout, get session and user metadata.

You can place this file wherever you want.

// file: "./lib/auth.ts"

import { Google} from "arctic";
import { CreateLightAuth } from "@light-auth/nextjs";

const googleProvider = {
  providerName: "google",
  arctic: new Google(env.GOOGLE_CLIENT_ID, 
      env.GOOGLE_CLIENT_SECRET, 
      env.GOOGLE_REDIRECT_URI),
};

export const { providers, handlers, signIn, signOut, getAuthSession, getUser } 
     = CreateLightAuth({providers: [googleProvider]})

3) Adding Light Auth Handlers

Handlers are here to intercept all authentication requests used to authenticate your users:

// file: "./app/api/auth/[...lightauth].ts"

import { handlers } from "@/lib/auth";
export const { GET, POST } = handlers;

4) Adding login page

You have multiple way to launch the authentication process. For this example, we are going to use a Server Function.

You can also used a full client side technic, if you want to.

Check the official documentation for more on client side interaction.

// file: "./app/login.tsx"

import { signIn } from "@/lib/auth";

export default function LoginPage() {
  return (
    <div>
      <form
        action={async () => {
          "use server";
          await signIn("google", "/profile");
        }}
      >
        <button type="submit">login</button>
      </form>
    </div>
  );
}

5) Using Light Auth

Once your user is authenticated, you can use the Light-Auth SDK to access various information about the logged (or not) user.

In this small example, we are using the session to check if user is authenticated and can access privates ressources:

// file: "./app/profile.tsx"

import { getAuthSession, signIn  } from "@/lib/auth";

export default async function Home() {
  const session = await getAuthSession();

  return (
    <div>
      {session != null ? (
        <div>
          <p>✅ You are logged in!</p>
          <div>Session Email: {session.email}</div>
          <div>Session Provider: {session.providerName}</div>
        </div>
      ) : (
        <div>
            <p> You are not logged </p>
        </div>
      )}
    </div>
  );
}

If you need more info, do not hesitate to ping me @sebpertus

You can also check the complete documentation here: https://lightauth.github.io