Build a guestbook with Next.js, NextAuth and Supabase (supab

Stack

Supabase

What is supabase?

Supabase is an open source Firebase alternative providing all the backend features you need to build a product and offer users more simple UI then Firebase.

Install supabase.

# npmnpm install @supabase/supabase-js# yarnyarn add @supabase/supabase-js

Sign up an account on https://supabase.com, create a new project (mine: Guestbookdemo).
Create a table (mine: guestbookdata).

Remember to disable RLS(Row Level Security) for table

Create supabaseClient.js in /lib .

// lib/supabaseClient.jsimport { createClient } from '@supabase/supabase-js'export const supabase = createClient('<project_url>', '<anon_public>')

Getting data from supabase data.

// pages/index.jsximport React from 'react'import { supabase } from '../lib/supabaseClient'const index = () => {    const [guestbookData, setGuestbookData] = React.useState(null)    // fetch supabase table data    const fetchguestbook = async () => {        const { data, error } = await supabase.from('guestbook').select()        if (data) {            setGuestbookData(data)            console.log(data)        }    }    return (        <div>            <ul>{guestbookData && guestbookData.map((data) => <li>{data.message}</li>)}</ul>        </div>    )}export default index

Upload table data to supabase.

// pages/index.jsx// ...const uploaddata = async (e) => {    let { data } = await supabase.from('guestbook').insert([        {            message: '<your message>',            username: '<your username>',            email: '<your email>',        },    ])    fetchguestbook()}// ...

Remove table data from supabase.

// pages/index.jsx// ...const removedata = async (removeid) => {    // removeid = table item you want to remove    const { data } = await supabase.from('guestbook').delete().eq('id', removeid)    fetchguestbook()}// ...

NextAuth

Install NextAuth.

# npmnpm install next-auth# yarnyarn add next-auth

To add NextAuth.js to a project create a file called [...nextauth].js in pages/api/auth

All provider set up documentation of NextAuth on https://next-auth.js.org/providers/

// pages/api/auth/[...nextauth].js// Example for github providerimport NextAuth from 'next-auth'import GithubProvider from 'next-auth/providers/github'export const authOptions = {    // Configure one or more authentication providers    providers: [        GithubProvider({            clientId: process.env.GITHUB_ID,            clientSecret: process.env.GITHUB_SECRET,        }),        // ...add more providers here    ],}export default NextAuth(authOptions)

Add NextAuth login in pages.

// pages/index.jsx// ...import { useSession, signIn, signOut } from 'next-auth/react'const index = () => {    const { data: session } = useSession()    return(      // ...      <button onClick={()=>signIn('Login provider')}>Sign in</button>      <button onClcik={()=>signOut()} >Sign out</button>      // ...    )}

Conclusion

Supabase and NextAuth are both perfect choices for beginners who want to learn basic database or build a simple auth login application.

Guestbook demo: https://eliaschen-guestbook-demo.vercel.app
Guestbook demo (github repository): https://github.com/chenelias/eliaschen-guestbook-demo
My Guestbook: https://eliaschen.dev/guestbook

⚡Thanks for reading, see you in the next blog.