Easy SaaS Next

Authentication System

Quickly implement an authentication system in Easy SaaS Next using better-auth

Easy SaaS Next uses better-auth as its authentication system.

Using better-auth requires database support. Therefore, you need to configure the database before using it.

Configuration

All configuration files are located in the src/lib folder.

auth-client.ts
auth.ts

For rapid development, Easy SaaS Next uses Google and Github as default authentication methods.

The advantage of this approach is that users don't need to verify their email addresses (email login typically requires sending verification emails). You only need to apply for Google and Github OAuth to quickly integrate the authentication system.

Configure Google OAuth

  1. Log in to Google Cloud Console
  2. Go to OAuth Client ID to create an OAuth client ID
  3. Configure JavaScript Origins as http://localhost:3000 or https://your-domain
  4. Configure Redirect URI as http://localhost:3000/api/auth/callback/google or https://your-domain/api/auth/callback/google
  5. Configure the clientId and clientSecret in your environment variables
.env
# google client id
GOOGLE_CLIENT_ID=
# google client secret
GOOGLE_CLIENT_SECRET=

Configure Github OAuth

  1. Log in to Github
  2. Go to OAuth Apps to create an OAuth application
  3. Configure Homepage URL as http://localhost:3000 or https://your-domain
  4. Configure Authorization callback URL as http://localhost:3000/api/auth/callback/github or https://your-domain/api/auth/callback/github
  5. Configure the clientId and clientSecret in your environment variables
.env
# github client id
GITHUB_CLIENT_ID=
# github client secret
GITHUB_CLIENT_SECRET=

Plugins

Easy SaaS Next uses plugins to enhance better-auth functionality.

Admin Plugin

The admin plugin is one of the better-auth plugins used for user management by administrators or route protection.

You only need to find the user table in your database and set the role field of your account to admin.

For more details, please check the better-auth admin plugin documentation.

Usage

Using in Client-side

import { useUser } from '@/components/user-provider'

const { data: session, isPending, error } = useUser()

Using in Server-side

import { headers } from 'next/headers'

import { auth } from '@/lib/auth'

const session = await auth.api.getSession({
  headers: await headers(),
})