Authentication

By default, we are using Clerk for auth. You can switch to NextAuth, Firebase, or Supabase by changing the platform value in app/context/auth-context/index.tsx.

Global App Setup with Authentication

// app/layout.tsx
import { ClerkProvider } from '@clerk/nextjs';
import SessionProviderComp from './components/nextauth/SessionProvider';
import { AuthProvider } from '@/app/context/auth-context';

export default async function RootLayout({ children }) {
  const session = await getServerSession(authOptions);
  return (
    <html lang="en">
      <body>
        <ClerkProvider>
          <SessionProviderComp session={session}>
            <AuthProvider>
              <CustomizerContextProvider>
                <ThemeProvider>
                  {children}
                </ThemeProvider>
              </CustomizerContextProvider>
            </AuthProvider>
          </SessionProviderComp>
        </ClerkProvider>
      </body>
    </html>
  );
}

1. Clerk

Clerk is the default auth provider. Set the platform in app/context/auth-context/index.tsx:

const initialState: InitialStateType = {
  isAuthenticated: false,
  isInitialized: false,
  user: null,
  platform: 'Clerk', // Change platform here
};

Setup Environment Variables:

# .env.local
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_publishable_key
CLERK_SECRET_KEY=your_secret_key

NEXT_PUBLIC_CLERK_SIGN_IN_URL=/auth/login
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/auth/register

Wrap your app with ClerkProvider in app/layout.tsx:

import { ClerkProvider } from '@clerk/nextjs';

export default function RootLayout({ children }) {
  return (
    <ClerkProvider>
      {children}
    </ClerkProvider>
  );
}

How to restrict a page if user is not signed in:

// app/guards/auth-guard/AuthGuard.tsx
'use client';
import { usePathname, useRouter } from 'next/navigation';
import useAuth from './UseAuth';
import { useEffect } from 'react';

const AuthGuard = ({ children }) => {
  const { isAuthenticated, isInitialized } = useAuth();
  const router = useRouter();

  useEffect(() => {
    if (isInitialized && !isAuthenticated) {
      router.push('/auth/login');
    }
  }, [isAuthenticated, isInitialized, router]);

  if (!isInitialized) return null;
  return children;
};

export default AuthGuard;

2. NextAuth

Folders and Files: app/api/auth/[...nextauth]/route.js

// app/api/auth/[...nextauth]/route.js
import NextAuth from 'next-auth';
import CredentialsProvider from 'next-auth/providers/credentials';
import GoogleProvider from 'next-auth/providers/google';
import GitHubProvider from 'next-auth/providers/github';

export const authOptions = {
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
    GitHubProvider({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET,
    }),
    CredentialsProvider({
      name: 'credentials',
      credentials: {
        email: { label: 'Email', type: 'text' },
        password: { label: 'Password', type: 'password' },
      },
      authorize: async (credentials) => {
        if (
          credentials?.email === 'shadcndashboard.info@gmail.com' &&
          credentials?.password === 'shadcndashboard'
        ) {
          return { id: '1', name: 'shadcndashboard', email: 'shadcndashboard.info@gmail.com' };
        }
        return null;
      },
    }),
  ],
  pages: {
    signIn: '/auth/login',
  },
  callbacks: {
    async session({ session, token }) {
      if (token && session.user) {
        session.user.id = token.sub;
      }
      return session;
    },
  },
  secret: process.env.NEXTAUTH_SECRET,
};

const handler = NextAuth(authOptions);
export { handler as GET, handler as POST };

Setup Environment Variables:

# .env.local
GOOGLE_CLIENT_ID="Your Google Client ID"
GOOGLE_CLIENT_SECRET="Your Google Client Secret"

NEXTAUTH_SECRET="Your NEXTAUTH_SECRET Key"
NEXTAUTH_URL="http://localhost:3000/"

GITHUB_ID="Your GITHUB_ID"
GITHUB_SECRET="Your GITHUB_SECRET"

Platform Configuration:

// app/context/auth-context/index.tsx
const initialState: InitialStateType = {
  platform: 'NextAuth', // Change platform to NextAuth
};

How to get Google Client ID and Secret Key:

Go to https://console.cloud.google.com/getting-started
Create a project, enable OAuth, and copy Client ID and Secret.
You can create a GitHub ID and secret key and replace in the .env file. Follow: https://authjs.dev/guides/configuring-github
Setup callback URL http://localhost:3000/api/auth/callback/github while creating an ID and key.
Once you replace the ID and secret key you just need to test the sign in page.
You can add any provider from https://next-auth.js.org/providers/ — just add it to route.js.

How to restrict a page if user is not signed in:

import { useSession } from 'next-auth/react';

export default function YourComponent() {
  const { data: session } = useSession();

  if (session) {
    // render for logged-in users
    return (...your html);
  }
  return (...else html);
}

3. Firebase Method

For more details about Firebase: https://firebase.google.com/

Folders and Files: app/guards/auth-guard/UseAuth.tsx

// app/guards/auth-guard/UseAuth.tsx
import { useContext } from 'react';
import AuthContext from 'src/app/context/auth-context';

const useAuth = () => useContext(AuthContext);

export default useAuth;

Platform Configuration:

// app/context/auth-context/index.tsx
const initialState: InitialStateType = {
  platform: 'Firebase', // Change platform to Firebase
};

How to add key into template:

// app/guards/firebase/Firebase.tsx
const firebaseConfig = {
  apiKey: 'API_KEY',
  authDomain: 'AUTH_DOMAIN',
  projectId: 'PROJECT_ID',
  storageBucket: 'STORAGE_BUCKET',
  messagingSenderId: 'SENDER_ID',
  appId: 'API_ID',
  databaseURL: 'DATABASE_URL',
};

Steps to generate Firebase key:

Click on "Go to console" displayed on the right side of your Firebase account.
Click on Add Project.
Enter project name, select country, accept terms and click Create Project.
In the left panel, click Develop then Authentication.
Click the "Web Setup" button.
Copy the configuration and paste it into app/guards/firebase/Firebase.tsx.
Go to the Sign-in Method tab. Enable Email/Password and Anonymous in sign-in providers.
Click Database from the left panel, then Create a database.
Select "start in locked mode" and click Enable.
Select Real-time Database Rules tab change read/write from false to true.

4. Supabase Method

Create a .env.local file:

# .env.local
NEXT_PUBLIC_SUPABASE_URL="Your Supabase URL"
NEXT_PUBLIC_SUPABASE_ANON_KEY="Your SUPABASE_ANON_KEY"

Folders and Files: app/guards/supabase/supabase-client.ts

// app/guards/supabase/supabase-client.ts
import { createClient } from '@supabase/supabase-js';

const supabaseUrl: string | any = process.env.NEXT_PUBLIC_SUPABASE_URL;
const supabaseKey: string | any = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;

export const supabase = createClient(supabaseUrl, supabaseKey);

Platform Configuration:

// app/context/auth-context/index.tsx
const initialState: InitialStateType = {
  platform: 'Supabase', // Change platform to Supabase
};

Steps to generate Supabase key:

Go to https://supabase.com/
Click "Sign Up" or "Log In" and complete the process.
On the dashboard, click "New Project".
Enter project name, select region, and click Create Project.
Once created, go to the Project Dashboard.
In the left panel, click the Authenticationtab. By default, Email & Password is enabled.
You can also enable OAuth providers like Google, GitHub, Twitter, etc.
In the Settings tab under Authentication, customize email templates for verification and password reset.
From the left sidebar, click API.
Project URL: Copy this URL for client-side authentication.
Anon Key: Copy this key for client-side authentication.
Install Supabase: npm install @supabase/supabase-js
Create an .env.local file and paste the URL and Anon Key.