1.8.1 Fix server-side route protection

Author: one-aalam

src/lib/auth/AuthContext.tsx

@@ -1,6 +1,6 @@
-import { createContext, FunctionComponent, useState, useEffect } from 'react'
+import { createContext, FunctionComponent, useState, useEffect, useCallback } from 'react'
 import Router from 'next/router'
-import { User } from '@supabase/supabase-js'
+import { User, Session, AuthChangeEvent } from '@supabase/supabase-js'
 import { supabase } from '~/lib/supabase'
 import { useMessage } from '~/lib/message'
 import { SupabaseAuthPayload } from './auth.types'
@@ -61,6 +61,15 @@ export const AuthProvider: FunctionComponent = ({
     }
 
     const signOut = async () => await supabase.auth.signOut()
+
+    const setServerSession = async (event: AuthChangeEvent, session: Session) => {
+      await fetch('/api/auth', {
+        method: 'POST',
+        headers: new Headers({ 'Content-Type': 'application/json' }),
+        credentials: 'same-origin',
+        body: JSON.stringify({ event, session }),
+      })
+    }
 
     useEffect(() => {
         const user = supabase.auth.user()
@@ -78,6 +87,7 @@ export const AuthProvider: FunctionComponent = ({
           async (event, session) => {
             const user = session?.user! ?? null
             setUserLoading(false)
+            await setServerSession(event, session)
             if (user) {
               setUser(user)
               setLoggedin(true)

src/pages/api/auth.ts

@@ -0,0 +1,6 @@
+import { NextApiRequest, NextApiResponse} from 'next'
+import { supabase } from '~/lib/supabase'
+
+export default function handler(req: NextApiRequest , res: NextApiResponse) {
+  supabase.auth.api.setAuthCookie(req, res)
+}

src/pages/profile.tsx

@@ -36,7 +36,7 @@ const ProfilePage = ({ }: InferGetServerSidePropsType<typeof getServerSideProps>
 }
 
 export default ProfilePage
-
+// Fetch user data server-side to eliminate a flash of unauthenticated content.
 export const getServerSideProps: GetServerSideProps = async ({ req }): Promise<NextAppPageServerSideProps> => {
     const { user } = await supabase.auth.api.getUserByCookie(req)
     // We can do a re-direction from the server