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:
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.
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:
yarn add cotter
(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 .
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)
access_token
(a JWT token) is valid.access_token
for all your API endpoints, or you can generate your own session and set a cookieCheckout this Reack Hook use-magic-link
to integration Magic Link very quickly into a React app.
Read this article for more info: Simple Auth Setup for Your React App
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.