Email Auth with PKCE flow for SSR
Learn how to configure email authentication in your server-side rendering (SSR) application to work with the PKCE flow.
Setting up SSR client
Check out our guide for creating a client to learn how to install the necessary packages, declare environment variables, and create a Supabase client configured for SSR in your framework.
Create API endpoint for handling token_hash
In order to use the updated email links we will need to setup a endpoint for verifying the token_hash along with the type to exchange token_hash for the user's session, which is set as a cookie for future requests made to Supabase.
Update email templates with URL for API endpoint
Let's update the URL in our email templates to point to our new confirmation endpoint for the user to get confirmed.
Confirm signup template
_10<h2>Confirm your signup</h2>_10_10<p>Follow this link to confirm your user:</p>_10<p>_10 <a href="{{ .SiteURL }}/auth/confirm?token_hash={{ .TokenHash }}&type=email"_10 >Confirm your email</a_10 >_10</p>
Invite user template
_12<h2>You have been invited</h2>_12_12<p>_12 You have been invited to create a user on {{ .SiteURL }}. Follow this link to accept the invite:_12</p>_12_12<p>_12 <a_12 href="{{ .SiteURL }}/auth/confirm?token_hash={{ .TokenHash }}&type=invite&next=/path-to-your-update-password-page"_12 >Accept the invite</a_12 >_12</p>
Magic Link template
_10<h2>Magic Link</h2>_10_10<p>Follow this link to login:</p>_10<p><a href="{{ .SiteURL }}/auth/confirm?token_hash={{ .TokenHash }}&type=magiclink">Log In</a></p>
Change Email Address template
_10<h2>Confirm Change of Email</h2>_10_10<p>Follow this link to confirm the update of your email from {{ .Email }} to {{ .NewEmail }}:</p>_10<p>_10 <a href="{{ .SiteURL }}/auth/confirm?token_hash={{ .TokenHash }}&type=email_change">_10 Change Email_10 </a>_10</p>
Reset Password template
_10<h2>Reset Password</h2>_10_10<p>Follow this link to reset the password for your user:</p>_10<p>_10 <a_10 href="{{ .SiteURL }}/auth/confirm?token_hash={{ .TokenHash }}&type=recovery&next=/path-to-your-update-password-page"_10 >Reset Password</a_10 >_10</p>