Part 2 — User Authentication made easy with Supabase + Next.js

3 min readApr 4, 2023

We’ll show you just how simple it is to get started with Supabase and take your app’s authentication to the next level.

User Authentication with Next.js + Supabase

Join me on a journey to create a dynamic Next.js web app that will easily run background jobs for Node.js. We’ll be using a powerful combo of Next.js, Inngest, Supabase, and Vercel to bring your vision to life. Stick around and let’s get started!

Previous articles from this series:

About Me

As a tech creator, I build web2 and web3 products for a range of industries. I’m experienced in financial services, natural resources, medical tech, and blockchain. I’m a founding member of multiple companies, operating as CTO, product manager, and developer. I use Medium as a way to teach about technology and discuss business challenges beyond tech.

Follow me on Twitter or join my Telegram group to brainstorm and build together.

Topics Covered

Creating a Next.js app
Housekeeping
Create .env.local file
Add supabase sessions
Creating an authentication wrapper

Prerequisites

Part 1 — Configuring and testing a supabase database table and policies

Creating a Next.js app

npx create-next-app@latest app --typescript

Give your app a name, and agree to all the default configs.

Housekeeping

Once completed, go ahead and

Delete the code inside /src/styles/global.css
Delete the file/src/styles/Home.module.css
Update the /src/pages/index.tsx with the following

import Head from 'next/head'

export default function Home() {
  return (
    <>
      <Head>
        <title>Background Jobs</title>
        <meta name="description" content="Background Jobs: Next.js + Supabase + Inngest + Vercel" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main>Hello world!</main>
    </>
  )
}

Create .env.local file

Create the .env.local file and add the following:

NEXT_PUBLIC_SUPABASE_URL=http://localhost:54321
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhb...

Add supabase sessions

Let’s create authentication for users. Add supabase helper libraries.

yarn add @supabase/supabase-js @supabase/auth-helpers-react @supabase/auth-helpers-nextjs @supabase/auth-ui-react

Update/src/pages/_app.tsx with the following code:

import '@/styles/globals.css'
import type { AppProps } from 'next/app'
import { createBrowserSupabaseClient } from '@supabase/auth-helpers-nextjs'
import { SessionContextProvider } from '@supabase/auth-helpers-react'
import { useState } from 'react'

export default function App({ Component, pageProps }: AppProps) {
  const [supabase] = useState(() => createBrowserSupabaseClient())
  return (
    <SessionContextProvider supabaseClient={supabase} initialSession={pageProps.initialSession}>
      <Component {...pageProps} />
    </SessionContextProvider>
  )
}

Creating an authentication wrapper

Create a file /src/components/auth/AuthWrapper.tsx

import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react"
import { Auth } from '@supabase/auth-ui-react'
import { ThemeSupa } from "@supabase/auth-ui-shared"

interface AuthWrapperProps {
    children: JSX.Element | JSX.Element[]
}

export default function AuthWrapper({ children }: AuthWrapperProps) {
  const session = useSession()
  const supabase = useSupabaseClient()
  
  if (session) {
    return <>{children}</>
  }
  
  return (
    <>
        <Auth supabaseClient={supabase} appearance={{ theme: ThemeSupa }} />
    </>
  )
}

The wrapper checks if a session exists, if it does, it returns the children, else it returns the authentication component.

Update /src/pages/index.tsx

import AuthWrapper from '@/components/auth/AuthWrapper'
import Head from 'next/head'

export default function Home() {
  return (
    <>
      <Head>
        <title>Background Jobs</title>
        <meta name="description" content="Background Jobs: Next.js + Supabase + Inngest + Vercel" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main>
        <AuthWrapper>
          <h1>Authenticated!</h1>
        </AuthWrapper>
      </main>
    </>
  )
}

Congratulations! You have built a web app that supports authentication powered by Supabase.

Code.

This was part 2 of a series of articles that will discuss how to use Next.js, Inngest, Supabase, and Vercel to build a serverless application that runs background jobs.

In our next session, we will build out our views for our application. Stay tuned!

If this article was helpful, join our Telegram group! It is a space to discuss new ideas, build projects, and troubleshoot code and business challenges.

I build web2 and web3 products for a range of industries. I’m a founding member of multiple companies, operating as CTO, product manager, and developer. I use Medium as a way to teach about technology and discuss business challenges beyond tech.

Follow me on Twitter.