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 { SessionAuth, useSessionContext } from 'supertokens-auth-react/recipe/session'
// take a look at the Creating Supabase Client section to see how to define getSupabaselet getSupabase: any;
export default function Home() {  return (    // We will wrap the ProtectedPage component with the SessionAuth so only an    // authenticated user can access it.    <SessionAuth>      <ProtectedPage />    </SessionAuth>  )}
function ProtectedPage() {  // retrieve the authenticated user's accessTokenPayload and userId from the sessionContext  const session = useSessionContext()
  const [userEmail, setEmail] = useState('')  useEffect(() => {    async function getUserEmail() {      if (session.loading) {        return;      }      // 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(session.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', session.userId)
      if (data.length > 0) {        setEmail(data[0].email)      }    }    getUserEmail()  }, [session])
  if (session.loading) {    return null;  }
  return (    <div>      <Head>        <title>SuperTokens 💫</title>        <link rel="icon" href="/favicon.ico" />      </Head>
      <main>        <p>          You are authenticated with SuperTokens! (UserId: {session.userId})          <br />          Your email retrieved from Supabase: {userEmail}        </p>      </main>    </div>  )}

As seen above we will fetch the access token payload from SuperTokens to retrieve the authenticated user's Supabase access token which can be used to fetch the user's email from Supabase.