Magic.link Authentication

How configure the Magic.link authentication service.

Saas UI supports authentication with Magic.link. The following steps will guide you through the process of setting up Magic.link authentication.

  1. Install the Magic Javascript client and the magic auth service in the @app/config package.
cd packages/app-config && yarn add magic-sdk @saas-ui/magic
  1. Copy apps/web/.env.example to apps/web/.env and add your public Magic API Key.
NEXT_PUBLIC_MAGIC_API_KEY="..."
  1. Edit packages/app-config/src/auth-service and create the Magic authentication service.
import { Magic } from 'magic-sdk'
import { createAuthService } from '@saas-ui/magic'


export const magic = new Magic(process.env.NEXT_PUBLIC_MAGIC_API_KEY || '')


export const authService = createAuthService(magic)

Now your frontend is configured to use Supabase authentication.

Try it out by running yarn dev:web and navigating to http://localhost:3000/app.

The Magic integration only supports magic link authentication.

Was this helpful?