Skip to main content
Which frontend SDK do you use?
supertokens-web-js / mobile

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.

Which frontend SDK do you use?
supertokens-web-js / mobile