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:

How Does A Chrome Extension Work? (Web Development)

Or the video tutorial here:

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

Create a Passwordless Authentication Server

Or the video tutorial here:

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.

Be sure to follow us on Instagram and Twitter to keep up with our latest Web Development tutorials.

Passwordless Login System with Google Chrome Extensions | Magic Links