1.6 Redirect on Sign-in and Sign-out

Author: one-aalam

src/config.ts

@@ -0,0 +1,2 @@
+export const ROUTE_HOME = '/profile'
+export const ROUTE_AUTH = '/'

src/lib/auth/AuthContext.tsx

@@ -1,20 +1,30 @@
-import { createContext, FunctionComponent, useState } from 'react'
+import { createContext, FunctionComponent, useState, useEffect } from 'react'
+import Router from 'next/router'
+import { User } from '@supabase/supabase-js'
 import { supabase } from '~/lib/supabase'
 import { useMessage } from '~/lib/message'
 import { SupabaseAuthPayload } from './auth.types'
+import { ROUTE_HOME, ROUTE_AUTH } from '~/config'
 
 export type AuthContextProps = {
+    user: User,
     signUp: (payload: SupabaseAuthPayload) => void,
     signIn: (payload: SupabaseAuthPayload) => void,
-    loading: boolean
+    signOut: () => void,
+    loggedIn: boolean,
+    loading: boolean,
+    userLoading: boolean
 }
 
 export const AuthContext = createContext<Partial<AuthContextProps>>({})
 
 export const AuthProvider: FunctionComponent = ({
     children,
   }) => {
+    const [ user, setUser ] = useState<User>(null)
     const [ loading, setLoading ] = useState(false)
+    const [ userLoading, setUserLoading ] = useState(true)
+    const [ loggedIn, setLoggedin ] = useState(false)
     const { handleMessage } = useMessage()
 
     const signUp = async (payload: SupabaseAuthPayload) => {
@@ -37,11 +47,11 @@ export const AuthProvider: FunctionComponent = ({
     const signIn = async (payload: SupabaseAuthPayload) => {
         try {
             setLoading(true)
-          const { error } = await supabase.auth.signIn(payload)
+          const { error, user } = await supabase.auth.signIn(payload)
           if (error) {
             handleMessage({ message: error.message, type: 'error' })
           } else {
-            handleMessage({ message: 'Log in successful. I\'ll redirect you once I\'m done', type: 'success' })
+            handleMessage({ message: `Welcome, ${user.email}`, type: 'success' })
           }
         } catch (error) {
           handleMessage({ message: error.error_description || error, type: 'error' })
@@ -50,11 +60,45 @@ export const AuthProvider: FunctionComponent = ({
         }
     }
 
+    const signOut = async () => await supabase.auth.signOut()
+    
+    useEffect(() => {
+        const user = supabase.auth.user()
+    
+        if (user) {
+          setUser(user)
+          setUserLoading(false)
+          setLoggedin(true)
+          Router.push(ROUTE_HOME)
+        }
+      
+        const { data: authListener } = supabase.auth.onAuthStateChange(
+          async (event, session) => {
+            const user = session?.user! ?? null
+            setUserLoading(false)
+            if (user) {
+              setLoggedin(true)
+              Router.push(ROUTE_HOME)
+            } else {
+              Router.push(ROUTE_AUTH)
+            }
+          }
+        )
+    
+        return () => {
+          authListener.unsubscribe()
+        }
+    }, [])
+
 
     return (<AuthContext.Provider value={{ 
+                user,
                 signUp, 
                 signIn,
-                loading 
+                signOut,
+                loggedIn,
+                loading,
+                userLoading
             }}>
             {children}
         </AuthContext.Provider>

src/pages/index.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import { NextPage } from 'next'
 import { FaLock } from 'react-icons/fa'
 import { NextAppPageProps } from '~/types/app'
@@ -20,7 +20,7 @@ const FORM_VALUES: SignUpFieldProps = {
 
 const IndexPage: NextPage<NextAppPageProps> = ({}) => {
   const [ isSignIn, setIsSignIn ] = useState(true)
-  const { loading, signIn, signUp } = useAuth()
+  const { loading, signIn, signUp, user, loggedIn } = useAuth()
   // Now since we have our form ready, what we're gonna need for signing up our users
   // 1. let users provide email and password
   const [ values, handleChange, resetFormFields ] = useFormFields<SignUpFieldProps>(FORM_VALUES)

src/pages/profile.tsx

@@ -0,0 +1,26 @@
+import Link from 'next/link'
+import { useAuth } from '~/lib/auth'
+import Layout from '~/components/Layout'
+import { SpinnerFullPage } from '~/components/Spinner'
+
+const ProfilePage = ({}) => {
+    const { user, loading, signOut } = useAuth()
+
+    if(loading) {
+        return <SpinnerFullPage/>
+    }
+
+    return (
+        <Layout useBackdrop={false}>
+            <div className="h-screen flex flex-col justify-center items-center relative">
+                <h2 className="text-3xl my-4">Howdie, { user && user.email ? user.email : 'Explorer' }!</h2>
+                {!user && <small>You've landed on a protected page. Please <Link href="/">log in</Link> to view the page's full content </small>}
+                {user && <div>
+                    <button onClick={signOut} className="border bg-gray-500 border-gray-600 text-white px-3 py-2 rounded w-full text-center transition duration-150 shadow-lg">Sign Out</button>
+                </div> }
+            </div>
+        </Layout>
+    )
+}
+
+export default ProfilePage