Guides
Guide

How to add Magic Link to a Gatsby site

How to add Magic Link to a Gatsby site

29 June 2021
Download this example and get started in seconds:
npx make-magic --template gatsby
Banner for How to add Magic Link to a Gatsby site

Hi 👋, in this guide you'll be learning how to add passwordless login to a Gatsby site using Magic Link.


Boostrap Project

CLI Quickstart Tool

To start, run the following CLI command in your terminal. The make-magic NPM package is the quickest way to bootstrap a Magic project from a list of pre-built templates.

npx make-magic --template gatsby

Setup Project Name

After a few seconds, you will be prompted for a project name, this will also be the name of the folder that will be created for this project.

Prompt Project Name - Gatsby Guide

Magic Publishable API Key

After putting in a project name, you will be prompted for your Magic Publishable API Key, which enables user authentication with Magic.

Prompt Publishable API Key - Gatsby Guide

To get your publishable API key, you'll need to sign up to Magic Dashboard. Once you've signed up, an app will be created upon your first login (you'll be able to create new apps later).

Magic Dashboard - Gatsby Guide

You'll now be able to see your Test Publishable API Key - copy and paste the key into your CLI prompt.

Fill Publishable API Key - Gatsby Guide

Select NPM Client

After hitting Enter, you'll be asked to select whether you’d like to use npm / yarn as the NPM client for your project.

Prompt NPM Client - Gatsby Guide

Open Application

After selecting your NPM client, the gatsby server will automatically start, and your application will be running on http://localhost:8000.

In this example app, you'll be prompted to sign up for a new account using an email address or login to an existing one. The authentication process is secured by Magic.

Sign Up Form - Gatsby Guide

After clicking on your magic link email, you'll be successfully logged in, and redirected to the profile page that displays your email and public address.

Profile Page with User information - Gatsby Guide

Live Demo

https://gatsby-magic-starter.netlify.app

Let's make some magic!