Create a Passwordless Login System for Your Chrome Extension

Simplify your customer’s entry point.

This tutorial uses a boiler-plate Google Chrome Extension setup.

If you want to know how to get that setup,
Check out my write-up here:

Or the video tutorial here:

This tutorial also uses a ‘Passwordless Authentication Server’ built with NodeJS and Express.
Check out my write-up here:

Or the video tutorial here:

Image for post
Image for post

Let’s Begin.

We’ll start with creating a page that allows the user to ‘sign in’ with their email address.

Note:
We’ve attached a script that we’ll get to later.

We’ll also have a ‘sign out’ page.

Note:
We’ve attached a script that simply messages our ‘background.js’ script and signs the user out.

Let’s write our ‘manifest.json’.

{
"name": "",
"description": "",
"version": "0.1.0",
"manifest_version": 2,
"icons": {
"16": "./obj-16x16.png",
"32": "./obj-32x32.png",
"48": "./obj-48x48.png",
"128": "./obj-128x128.png"
},
"background": {
"scripts": [
"./background.js"
]
},
"options_page": "./options.html",
"browser_action": {},
"permissions": [
"cookies",
"http://0ff7e6d8d4af.ngrok.io/*",
"https://0ff7e6d8d4af.ngrok.io/*"
]
}

Note:
The permissions include ‘cookies’ which we’ll need to read ‘cookies’ from the browser.
The ‘ngrok’ domains allow our extension to read the ‘cookies’ set specifically by our ‘Authentication Server’.

Let’s write our ‘background.js’ script.

We have a variable to keep track of the user’s login status and we have our ‘listener’ tree.

We’ll have to take care of three conditions in our ‘listener’.
1. ‘login’
Flip the user’s ‘sign in’ status to true.

2. ‘logout’
Flip the user’s ‘sign in’ status to false and clear the ‘cookies’ sent by our ‘Authentication Server’.
We must clear the ‘cookies’ when the user signs out because our extension (as you’ll see later on) looks for them in that ‘popup-sign-in-script.js’ (the sign in popup page). This is how our extension “knows” our user is logged in.

3. ‘sendMail’
Here is where we interact with our ‘Authentication Server’.
We send the user’s email to our server’s ‘/send_magic_link’ endpoint, our server sends an email with a magic link to our user, and sends us back a ‘200’ response code.

Finally, let’s handle the user successfully opening their email and clicking on the magic link.

In the script attached to our ‘popup-sign-in.html’, we’ll just check to see if the cookies associated with our server were embedded in our browser.

Note:
1. Notice we’re sending the user’s email to our ‘background.js’ script when they click the submit button.
2. Notice we’re not just checking that the ‘cookies’ are embedded, but that they match the structure we expect; There must be two fields: ‘sessionid’ and ‘sub’.

If you would like a more in-depth guide, check out my full video tutorial on YouTube, An Object Is A.

Passwordless Login System with Google Chrome Extensions | Magic Links

Written by

Learning to code…

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store