Skip to main content
Which UI do you use?
Custom UI
Pre built UI

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 getSupabase
let 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 UI do you use?
Custom UI
Pre built UI