Retrieve the user's email on the frontend
With the backend setup we can modify our frontend to retrieve the user's email from Supabase.
// pages/index.tsx
import React, { useState, useEffect } from 'react'import Head from 'next/head'import ThirdPartyEmailPassword from 'supertokens-auth-react/recipe/thirdpartyemailpassword'import dynamic from 'next/dynamic'import { useSessionContext } from 'supertokens-auth-react/recipe/session'
// take a look at the Creating Supabase Client section to see how to define getSupabaselet getSupabase: any;
const ThirdPartyEmailPasswordAuthWrapper = dynamic( new Promise<typeof ThirdPartyEmailPassword.ThirdPartyEmailPasswordAuth>((res) => res(ThirdPartyEmailPassword.ThirdPartyEmailPasswordAuth) ), { ssr: false })
export default function Home() { return ( // We will wrap the ProtectedPage component with the ThirdPartyEmailPasswordAuthWrapper so only an // authenticated user can access it. This will also allow us to access the users session information // within the component. <ThirdPartyEmailPasswordAuthWrapper> <ProtectedPage /> </ThirdPartyEmailPasswordAuthWrapper> )}
function ProtectedPage() { // retrieve the authenticated user's accessTokenPayload and userId from the sessionContext const { accessTokenPayload, userId } = useSessionContext()
const [userEmail, setEmail] = useState('') useEffect(() => { async function getUserEmail() { // retrieve the supabase client who's JWT contains users userId, this will be // used by supabase to check that the user can only access table entries which contain their own userId const supabase = getSupabase(accessTokenPayload.supabase_token)
// retrieve the user's name from the users table whose email matches the email in the JWT const { data } = await supabase.from('users').select('email').eq('user_id', userId)
if (data.length > 0) { setEmail(data[0].email) } } getUserEmail() }, [])
return ( <div> <Head> <title>SuperTokens 💫</title> <link rel="icon" href="/favicon.ico" /> </Head>
<main> <p> You are authenticated with SuperTokens! (UserId: {userId}) <br /> Your email retrieved from Supabase: {userEmail} </p> </main> </div> )}
As seen above we will be using SuperTokens useSessionContext
hook to retrieve the authenticated user's userId
and accessTokenPayload
. Using React's useEffect
hook we can use the Supabase client to retrieve the user's email from Supabase using the JWT retrieved from the user's accessTokenPayload
and their userId
.