nextjs-ts-user-management, how to handle redirect to login page using #supabase/auth-helpers-nextjs? - authentication

Question

TLDR:
I'm leveraging https://github.com/supabase/supabase/tree/master/examples/user-management/nextjs-ts-user-management
to build basically a TODO/hello world app and it's amazing. But you will notice that the way they handle loginpage/protected pages toggle in nextjs-ts-user-management is via session ? <Account/>: <Login/> (here) which is not compatible with using Next's file directory routing system and therefore doesn't allow me to use router etc. Is there an example somewhere that shows how to do this the correct way using urls?
Details:
I have successfully implemented a middleware.ts to redirect the user to login page if they're not authenticated per the instructions here which works great! https://supabase.com/docs/guides/auth/auth-helpers/nextjs#auth-with-nextjs-middleware
but it only works when user tries to navigate to a new page.
The middleware.ts does not redirect the user for the below situations:
user clicks a signOut button
user revisits the page after he is no longer authenticated
Is there some best practice way of addressing those 2 situations since it doesnt seem possible to do using middleware?
I've tried making "ProtectedRoutes" and stuff like that but it has 2 problems (1.no way to see if session is loading so login page flashes on page load, 2. it doesnt actually change the url, they are still on /profile but seeing the login page for example.)
After some digging I found this NextJS + Supabase - Blank Page Issue
but it still doesn't solve the "doesnt change the url" problem i listed above.
Any help or pointers is appreciated. I'm pretty new to Next and I love it, surely i am missing something simple here...
here is what I have currently:
"#supabase/auth-helpers-nextjs": "^0.5.2",
"#supabase/auth-helpers-react": "^0.3.1",
"#supabase/auth-ui-react": "^0.2.2",
"#supabase/supabase-js": "^2.0.4",
"next": "12.3.1",
"react": "18.2.0",
"react-dom": "18.2.0"
//_app.tsx
function MyApp({
Component,
pageProps,
}: AppProps<{
initialSession: Session
}>) {
const [supabaseClient] = useState(() => createBrowserSupabaseClient())
const queryClient = new QueryClient()
return (
<SessionContextProvider
supabaseClient={supabaseClient}
initialSession={pageProps.initialSession}
>
<QueryClientProvider client={queryClient}>
<RouteGuard>
<Component {...pageProps} />
</RouteGuard>
</QueryClientProvider>
</SessionContextProvider>
)
}
export default MyApp
const RouteGuard = ({ children }: { children: ReactElement }) => {
const session = useSession()
const { user, isAuthorizing } = useAuth()
if (isAuthorizing) {
return <div>Loading...</div>
}
if (!session) {
return <Login />
}
return <>{children}</>
}
//useAuth.js
import { useSupabaseClient } from '#supabase/auth-helpers-react'
import { useEffect, useState } from 'react'
export const useAuth = () => {
const [user, setUser] = useState(null)
const [isAuthorizing, setIsAuthorizing] = useState(true)
const supabase = useSupabaseClient()
useEffect(() => {
supabase.auth
.getUser()
.then((response) => {
setUser(response.data.user)
})
.catch((err) => {
console.error(err)
})
.finally(() => {
setIsAuthorizing(false)
})
}, [])
return { user, isAuthorizing }
}
//login.tsx
import type { NextPage } from 'next'
import { Auth, ThemeSupa, ThemeMinimal } from '#supabase/auth-ui-react'
import { useSession, useSupabaseClient } from '#supabase/auth-helpers-react'
import { Layout } from '../components/Layout'
import { LayoutTailwind } from '../components/LayoutTailwind'
import { CodeBracketIcon, TvIcon } from '#heroicons/react/20/solid'
import { CurrencyDollarIcon, LifebuoyIcon } from '#heroicons/react/24/outline'
import { useRouter } from 'next/router'
export const Login: NextPage = () => {
const session = useSession()
const router = useRouter()
const supabase = useSupabaseClient()
if (session) {
router.push('/posts')
}
return (
<div className="mt-12">
<div className="flex min-h-full">
<div className="mx-auto w-full max-w-sm lg:w-96">
<div>
<CodeBracketIcon className="h-12" />
<h2 className="mt-6 text-3xl font-bold tracking-tight text-gray-900">Code Market</h2>
<div className="mt-2 text-sm text-gray-600 ">
<div className="flex items-center pb-1 gap-1">
<LifebuoyIcon className="h-4" />
Offer money for coding help
</div>
<div className="flex items-center gap-1">
<CurrencyDollarIcon className="h-4" />
Make money helping other coders
</div>
</div>
</div>
<div className="mt-8">
<Auth
providers={['github']}
supabaseClient={supabase}
appearance={{ theme: ThemeMinimal }}
/>
</div>
</div>
</div>
{/* <Footer /> */}
</div>
)
}
//middleware.ts
import { createMiddlewareSupabaseClient } from '#supabase/auth-helpers-nextjs'
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
export async function middleware(req: NextRequest) {
// We need to create a response and hand it to the supabase client to be able to modify the response headers.
const res = NextResponse.next()
// Create authenticated Supabase Client.
const supabase = createMiddlewareSupabaseClient({ req, res })
// Check if we have a session
const {
data: { session },
} = await supabase.auth.getSession()
// return res
// Check auth condition
if (session?.user.id) {
// Authentication successful, forward request to protected route.
return res
}
// Auth condition not met, redirect to home page.
const redirectUrl = req.nextUrl.clone()
redirectUrl.pathname = '/'
// redirectUrl.searchParams.set(`redirectedFrom`, req.nextUrl.pathname)
return NextResponse.redirect(redirectUrl)
}
export const config = {
matcher: ['/posts', '/createpost', '/profile'],
}

Answer 1

this ended up being the solution:
https://supabase.com/docs/guides/auth/auth-helpers/nextjs-server-components#supabase-listener
you should just look at the link above, but in case that goes away:
'use client'
import { useSupabaseClient } from '#supabase/auth-helpers-react'
import { useRouter } from 'next/router'
import { useEffect } from 'react'
export default function SupabaseListener({ accessToken }) {
const router = useRouter()
const supabase = useSupabaseClient()
useEffect(() => {
supabase.auth.onAuthStateChange((event, session) => {
if (session?.access_token !== accessToken) {
router.reload()
}
})
}, [accessToken])
return null
}
then you just put this somewhere high in your stack:
<SupabaseListener accessToken={session?.access_token} />
now whenever logged in status changes it refreshes the page which will then trigger your middleware.ts file to redirect you to login page