Loops Provider

Overview

The Loops provider uses email to send “magic links” that contain URLs with verification tokens can be used to sign in.

Adding support for signing in via email in addition to one or more OAuth services provides a way for users to sign in if they lose access to their OAuth account (e.g. if it is locked or deleted).

The Loops provider can be used in conjunction with (or instead of) one or more OAuth providers.

How it works

On initial sign in, a Verification Token is sent to the email address provided. By default this token is valid for 24 hours. If the Verification Token is used within that time (i.e. by clicking on the link in the email) an account is created for the user and they are signed in.

If someone provides the email address of an existing account when signing in, an email is sent and they are signed into the account associated with that email address when they follow the link in the email.

Configuration

Add and Verify your Domain on Loops

First, you’ll need to have completed the steps covered in the ‘Start here’ Loops documentation. The main thing required is to set up your domain records.

Generate an API Key

Next, you will have to generate an API key in the Loops Dashboard. You can save this API key as the AUTH_LOOPS_KEY environment variable.

AUTH_LOOPS_KEY=abc

Create a Transactional Email Template on Loops

The easiest way to achieve this is using the Loops email editor to create a transactional email template. If you’re new to Loops, you can find rich documentation here.

Copy the Transactional ID value from the last page of the template creation process, and save this as the AUTH_LOOPS_TRANSACTIONAL_ID environment variable. If you’re following these steps, you should now have two environment variables set up for Loops.

AUTH_LOOPS_KEY=abc
AUTH_LOOPS_TRANSACTIONAL_ID=def

import NextAuth from "next-auth"
import Loops from "next-auth/providers/loops"
 
export const { handlers, auth, signIn, signOut } = NextAuth({
  adapter: ..., // database adapter of your choosing
  providers: [
    Loops({
      apiKey: process.env.AUTH_LOOPS_KEY,
      transactionalId: process.env.AUTH_LOOPS_TRANSACTIONAL_ID,
    }),
  ],
})

import { SvelteKitAuth } from "@auth/sveltekit"
import Loops from "@auth/sveltekit/providers/loops"
import { AUTH_LOOPS_KEY, AUTH_LOOPS_TRANSACTIONAL_ID } from "@env/static/private"
 
export const { handle, signIn, signOut } = SvelteKitAuth({
  adapter: ..., // database adapter of your choosing
  providers: [
    Loops({
      apiKey: AUTH_LOOPS_KEY,
      transactionalId: AUTH_LOOPS_TRANSACTIONAL_ID,
    }),
  ],
})