Magic Link Authentication in react SPA

user_2054671 0
Viewed 1200

For a small app catering to a very small set of users, we are planning to implement magic link authentication. The user would come to the application, enter their email address, get a magic link on the email address, after the user clicks on the link, they are logged in to the app.

I am not able to find enough resources to figure out how to do it in a SPA. Here are some helpful links:

Magic Link with Node

Magic Link with Auth0

This is the SPA workflow that I have in mind:

  1. User comes to the SPA
  2. The SPA takes the user to the login page where they can provide their email address.
  3. The SPA sends the email address to the backend api
  4. The api decides whether or not the user is registered, and sends them an email with a short lived jwt.
  5. Clicking on this link takes user to a SPA route with the jwt in query params.
  6. The Frontend forwards this jwt to the api backend, and the api backend verifies the jwt and sets a cookie
  7. This cookie can then be used to maintain the user session.

I want to verify this workflow, but I am not able to find enough resources. Specifically, I want to clarify whether the magic link should send the user to the SPA and the SPA should be responsible for extracting the jwt and sending it to the API backend, or is there another way to do it?

Is this how this should be implemented? What are the security implications?

I am using react and react-router.

react-router reactjs authorization authentication security
3 Answers

Cotter co-founder here.

We have a super easy magic link integration for React. Here's a guide to set up a Simple Magic Link Login for your React App.

You can integrate magic link login in 2 steps:

1. Add dependencies

yarn add cotter

2. Show the log in form

(step 2-4 in your flow)

import React, { useEffect } from "react";
import Cotter from "cotter"; //  1️⃣  Import Cotter

function App() {
  useEffect(() => {
    //  2️⃣ Initialize and show the form
    var cotter = new Cotter(API_KEY_ID); //  Specify your API KEY ID here
    cotter
      .signInWithLink() // use Magic link
      .showEmailForm() // show email login form
      .then(resp => console.log(resp))
      .catch(err => console.log(err));
  }, []);

  return (
    // 3️⃣  Put a <div> with id "cotter-form-container"
    // that will contain the form
    <div id="cotter-form-container" style={{ width: 300, height: 300 }} />
  );
}

export default App;

You can create your API_KEY_ID here.

Done! Now you should have an email Login Form that sends a magic link to your users. Here's a working example.

The response

After the user click the link (step 5), you'll receive the following response in then((resp) => console.log(resp)):

{
    "email": "youremail@gmail.com",
    "oauth_token": {
        "access_token": "eyJhbGciONiIsImtiJFUzI1pZCI6...",
        // you'll also get a refresh token and an id token
    },
    "user": {
        "ID": "abcdefgh-1234-5678-1234-f17786ed499e", // Cotter's User ID
        // More user information
    }
}

You can then send this response to your backend server and do the following steps: (step 6-7 in your flow)

  1. Verify if the access_token (a JWT token) is valid.
  2. If it's valid, you can register the user if the email is not recognized (you should also associate the email with Cotter's user id).
  3. You can use the access_token for all your API endpoints, or you can generate your own session and set a cookie
user_136071000
user_4572240

This is the workflow for magic link:

When a user enters the email address, Magic sends verification link to the email address to verify that email. When you click on "Confirm your email", a modal will show up to log in to the app. When the user click on the "Log in to app", Public+Private keys are generated and stored on the browser. That means users own their own identity. This key pair is in embedded iframe and inaccessible to the developer in order to protect the user's private key.

Since those keys are generated on the user's client instead of magic servers, Magic will not be able to see those secrets.

Magic sdk will use that private key to generate auth token. This auth token is called DID token (Decentralized Identifier). When you decode this token, you can see the user's email address and when it was issued. Essentially, DID token is your digital signature. If we store this token in our database and if our database gets hacked, malicious users will not be able to access our private key. Then we pass this DID token to the server to check the user

Magic stores the user's email and id in indexedDb. It also stores some cookies for itself, to function properly

to work with magic, you use magic-sdk. You set the magic client ✨

import { Magic } from "magic-sdk";

const createMagic = () => {
  return (   
    new Magic(process.env.API_KEY)
  ); 
};

export const magic = createMagic();

then using this client:

// you have input and captured the email if (email) { try {

  // this store public/private key on browser and returns the DID token
  const didToken = await magic.auth.loginWithMagicLink({
    email,
  });

  if (didToken) {
  // once you have the token, using metadata, you can add another propertis
 // iat, exp, roles etc
 // then sign this with jwt
 // store the token in browser
  }
user_102628050
Related