Skip to main content

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.