Supabase

Folders And Files

Overwite .env file with real Credentials

       
                
// this is your .env file                  
NEXT_PUBLIC_SUPABASE_URL="Your Url"
NEXT_PUBLIC_SUPABASE_ANON_KEY="Your SUPABASE_ANON_KEY Key"
               
               
               

Inside that folder you will get this file src > app > guards > supabase > supabaseClient.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

 
// -----------------------------------------------------------------------------------------
// File : src/app/context/AuthContext.tsx
// -----------------------------------------------------------------------------------------
  const  initialState : InitialStateType  = { 
     platform: 'Supabase',
  }
  

Steps for Generate key

• Go to “https://supabase.com/
• click on "Sign Up" or "Log In" and complete the process.
• On the dashboard, click on the "New Project" button.
• After Display popup menu, Enter Project name, Select Country.Click on Create Project Button.
• Once your project is created, go to the Project Dashboard.
• In Left Panel, Now Click on authentication Tab.
• By default, Email & Password authentication is enabled, which allows users to sign up and sign in using their email and password.
• You can also enable OAuth Providers like Google, GitHub, Twitter, etc.
• In the Settings tab under Authentication, you can customize email templates for user verification, password reset emails, and more.
• Now, From the left sidebar, click on API.
• Poject Url: This is used for client-side authentication, to interact with your Supabase project. Copy this URL.
• Anon Key: This is used for client-side authentication, Copy this key.
• Install Supabase : npm install @supabase/supabase-js
• Create an .env File to Store Your Keys

                
 // this is your .env file                  
NEXT_PUBLIC_SUPABASE_URL="Your Url"
NEXT_PUBLIC_SUPABASE_ANON_KEY="Your SUPABASE_ANON_KEY Key"

• 
• Create the supabaseClient.ts File

 

  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);
                                    
                                  

JWT based authentication

Folders And Files

You can configure your public and protected routes in middleware.ts file

       
                
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const token = request.cookies.get('accessToken')?.value;
  const pathname = request.nextUrl.pathname;

  const publicRoutes = ['/auth/login', '/auth/register', '/api', '/_next', '/favicon.ico'];

  if (publicRoutes.some((path) => pathname.startsWith(path))) {
    return NextResponse.next();
  }

  if (!token) {
    return NextResponse.redirect(new URL('/auth/login', request.url));
  }

  return NextResponse.next();
}

export const config = {
  matcher: ['/:path*'],
};