browse all posts
Image of Trevor-Indrek Lasn

Trevor-Indrek Lasn

How to Implement Supabase Magic Link with Inbucket in a Local Development Environment

Supabase
Backend

Jan 20, 2024

Magic Link authentication offers a secure and streamlined method for user authentication, eliminating the need for passwords.

This guide provides a walkthrough for integrating Magic Link authentication with Supabase in a local development setting, utilizing Inbucket as a reliable email testing service.

Blog post image

Prerequisites

  • Ensure that Magic Link setup is already configured in your Supabase project.
  • Docker installation is required for running Inbucket and Supabase locally.

Installing InBucket via Docker

Inbucket is an email testing service and runs as part of the local supabase setup if you use the CLI.

Inbucket, an integral part of the local Supabase setup, can be run using Docker.

For convenience, an Automated Build for Inbucket is available, negating the need for manual image building. for Inbucket, so you don’t have to build your own image.

docker run -d --name inbucket -p 9000:9000 -p 2500:2500 -p 1100:1100 inbucket/inbucket

Upon executing the command, the Inbucket container should be active and operational.

Blog post image

Setting up Local Supabase

For those yet to install supabase-cli, here are the installation instructions for macOS using Homebrew.

brew install supabase/tap/supabase

Starting Your Supabase Development Imgaes

Launch your local development server. The following example illustrates starting a Next.js server:

➜  lebohire-frontend-next git:(development) ✗ supabase start
Started supabase local development setup.

         API URL: http://127.0.0.1:54321
     GraphQL URL: http://127.0.0.1:54321/graphql/v1
          DB URL: postgresql://postgres:[email protected]:54322/postgres
      Studio URL: http://127.0.0.1:54323
    Inbucket URL: http://127.0.0.1:54324 <<< This should be here now
      JWT secret: super-secret-jwt-token-with-at-least-32-characters-long
        anon key: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6ImFub24iLCJleHAiOjE5ODM4MTI5OTZ9.CRXP1A7WOeoJeXxjNni43kdQwgnWNReilDMblYTn_I0
service_role key: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6InNlcnZpY2Vfcm9sZSIsImV4cCI6MTk4MzgxMjk5Nn0.EGIM96RAZx35lJzdJsyH-qQwv8Hdp7fsn3W0YpN81IU

You should see the `Studio URL: http://127.0.0.1:54323` command

Starting Your Development Server

Launch your local development server on 127.0.0.1, not on localhost. The following example illustrates starting a Next.js server.

  "scripts": {
    "dev": "next dev -H 127.0.0.1 -p 3000",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }

Running yarn run dev or an equivalent command should yield the following output.

➜ lebohire-frontend-next git:(development)yarn dev
yarn run v1.22.19
$ next dev -H 127.0.0.1 -p 3000
▲ Next.js 14.0.4
- Local: http://127.0.0.1:3000
- Network: http://127.0.0.1:3000
- Environments: .env.local

✓ Ready in 2.4s

Sign-In Test

Go to your application's sign-in page, input any email address, and initiate the Magic Link authentication process.

Blog post image

Inbucket Email Verification:

Access the Inbucket UI at http://127.0.0.1:54324. Locate and open the received email.

Confirm and Authenticate

Click the confirmation link in the email. This should set the user session and sign you into the application.

Blog post image

Session Verification

If successful, your application should now have an active Supabase session. You can verify this by checking the current user session:

  const { data } = await supabase.auth.getSession()

  console.log(data)
{
   "session":{
      "expires_at":1705728036,
      "expires_in":3470,
      "token_type":"bearer",
     "access_token":"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdWQiOiJhdXRoZW50aWNhdGVkIiwiZXhwIjoxNzA1NzI4MDM2LCJpYXQiOjE3MDU3MjQ0MzYsImlzcyI6Imh0dHA6Ly8xMjcuMC4wLjE6NTQzMjEvYXV0aC92MSIsInN1YiI6IjViY2Y5NzUxLWRkMDEtNDE1Zi1hYmUwLTgyMDdlMWNhMzVlNSIsImVtYWlsIjoidHJldm9yQGxlYm9oaXJlLmNvbSIsInBob25lIjoiIiwiYXBwX21ldGFkYXRhIjp7InByb3ZpZGVyIjoiZW1haWwiLCJwcm92aWRlcnMiOlsiZW1haWwiXX0sInVzZXJfbWV0YWRhdGEiOnt9LCJyb2xlIjoiYXV0aGVudGljYXRlZCIsImFhbCI6ImFhbDEiLCJhbXIiOlt7Im1ldGhvZCI6ImVtYWlsL3NpZ251cCIsInRpbWVzdGFtcCI6MTcwNTcyNDQzNn1dLCJzZXNzaW9uX2lkIjoiZjUwNTA5NDgtNjMzYS00ZjcwLWI3YWQtNTNkMDUxMzgyYjc4In0.u53mGzN1lzA226ivjaqVKhpTYZYOfnwhhv9uk42u6g0",
      "refresh_token":"TVl2JRfKChR9wg2KHKgA5A",
      "provider_token":null,
      "provider_refresh_token":null,
      "user":{
         "id":"5bcf9751-dd01-415f-abe0-8207e1ca35e5",
         "factors":null,
         "aud":"authenticated",
         "iat":1705724436,
         "iss":"http://127.0.0.1:54321/auth/v1",
         "email":"[email protected]",
         "phone":"",
         "app_metadata":{
            "provider":"email",
            "providers":[
               "email"
            ]
         },
         "user_metadata":{
            
         },
         "role":"authenticated",
         "aal":"aal1",
         "amr":[
            {
               "method":"email/signup",
               "timestamp":1705724436
            }
         ],
         "session_id":"f5050948-633a-4f70-b7ad-53d051382b78"
      }
   }
}

Conclusion

Following these steps ensures a robust and effective setup for testing Supabase Magic Link authentication locally, utilizing the Inbucket email testing service.

This method offers a practical approach for developers to validate email-based authentication workflows in a controlled local environment before deployment. Remember to adapt your SMTP and email configurations when transitioning from local development to a production setting.

If you have any questions or run into issues, feel free to contact me.

Find your dream software engineering job with us

Browse and find your perfect job. Build your profile, showcase your work, get hired by a top company.

Get Hired By A Top Company

This article was published on Lebohire.com: A specialized hiring platform dedicated to software engineering jobs.