1.8 Add server-side route protection

Author: one-aalam

src/pages/profile.tsx

@@ -1,12 +1,15 @@
 import { useEffect } from 'react'
+import { GetServerSideProps, InferGetServerSidePropsType } from 'next'
 import Link from 'next/link'
 import Router from 'next/router'
+import { supabase } from '~/lib/supabase'
 import { useAuth } from '~/lib/auth'
 import Layout from '~/components/Layout'
 import { SpinnerFullPage } from '~/components/Spinner'
 import { ROUTE_AUTH } from '~/config'
+import { NextAppPageServerSideProps } from '~/types/app'
 
-const ProfilePage = ({}) => {
+const ProfilePage = ({ }: InferGetServerSidePropsType<typeof getServerSideProps>) => {
     const { user, userLoading, signOut, loggedIn } = useAuth()
 
     useEffect(() => {
@@ -32,4 +35,25 @@ const ProfilePage = ({}) => {
     )
 }
 
-export default ProfilePage
+export default ProfilePage
+
+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
+    if(!user) {
+        return {
+            redirect: {
+              destination: '/',
+              permanent: false,
+            },
+        }
+    }
+    // or, alternatively, can send the same values that client-side context populates to check on the client and redirect
+    // The following lines won't be used as we're redirecting above
+    return {
+        props: {
+            user,
+            loggedIn: !!user
+        }
+    }
+}

src/types/app.ts

@@ -1,7 +1,25 @@
+import { User } from  '@supabase/supabase-js'
+
 export type NextAppSEOProps = {
     title: string
 }
 
 export type NextAppPageProps = {
     meta: NextAppSEOProps,
-}
+}
+
+export type NextAppPageUserProps = { 
+    props: {
+        user: User, 
+        loggedIn: boolean
+    }
+}
+
+export type NextAppPageRedirProps = { 
+    redirect: {
+        destination: string,
+        permanent: boolean
+    }
+}
+
+export type NextAppPageServerSideProps = NextAppPageUserProps | NextAppPageRedirProps