How to add Email and Password authentication to Nextjs with Supabase Auth

#webdev #javascript #react #nextjs

In this blog, we will learn how to add Email-Password based authentication to your Nextjs app with Supabase Auth. I will cover:

Setup a SMTP server with Brevo for sending emails
Change email templates for the email confirmation
Add Email authentication to Nextjs using server actions and components

For better understanding, you can watch the video tutorial here.

Setup SMTP server with Brevo

Create a Brevo account, and you need to create an organization.
Click on the Organization name on the top right and go to the SMTP & API section.
Click on the Create a new SMTP key button and give it a name.
Copy the SMTP key.

You need to add the SMTP details to the supabase.

Go to your Supabase project and go to settings
Go to authentication from the Configuration section.
Scroll down and you will see the SMTP Settings section.
Enable and fill out the details. Some of the information you can get from Brevo's SMTP & API page.
- From Email: {Your email}
- From Name: {Your name}
- SMTP Port: 587
- SMTP Host: smtp-relay.brevo.com
- SMTP Username: Your Brevo email (Check the SMTP & API page)
- SMTP Password: The SMTP key you copied earlier

SMTP setup is done.

Change email template

Go to the Email Templates section in the Authentication settings (supabase dashboard).
Click on the Confirm Signup template.
Paste the following code:

<h2>Confirm your signup</h2>

<p>Follow this link to confirm your user:</p>
<p>
  <a
    href="{{ .SiteURL }}/auth/confirm?token_hash={{ .TokenHash }}&type=email&next={{ .RedirectTo }}"
    >Confirm your email</a
  >
</p>

Note: You can customize the email template as you want. Make sure the href is correct on the link.

Add authentication to Nextjs

Create a server action:

import { createClientForServer } from '@/utils/supabase/server'
import { redirect } from 'next/navigation'

export const signupWithEmailPassword = async formData => {
  const supabase = await createClientForServer()

  const { data, error } = await supabase.auth.signUp({
    email: formData.get('email'),
    password: formData.get('password'),
  })

  if (error) {
    console.log('error', error)
    return {
      success: null,
      error: error.message,
    }
  }

  return {
    success: 'Please check your email',
    error: null,
  }
}

Explanation:

We created the supabase client using the createClientForServer function.
We used the signUp method to create a new user with the email and password.
You can get input data using get method on the formData object.
If there is an error, we return the error message; otherwise we return a success message to check the email.

Now add a form:

<form action={signinWithEmailPassword}>
  <input type='email' name='email' placeholder='Email' />
  <input type='password' name='password' placeholder='Password' />
  <button type='submit'>Submit</button>
</form>

Explanation:

We created a form and added the action attribute to call the server action. You can use the useActionState hook to display messages to the user.

That's it! You have successfully added email and password authentication to your Nextjs app with Supabase Auth. If you have any questions, feel free to ask in the comments.

I am looking for a new job opportunity. Please feel free to contact me if you or your team are hiring.

Contacts:
Email: thatanjan@gmail.com
Portfolio: https://thatanjan.com/
Linkedin: https://www.linkedin.com/in/thatanjan/
Github: https://github.com/thatanjan/

Next, you can check these videos: