Stop spending days to code your login page! Add Cotter’s magic link to your Gatsby app under 5 minutes

Supercharge your Gatsby app’s authentication system with Cotter’s magic link. Like how Slack does it, but simpler.

In this guide, we’ll show you how to integrate Cotter’s magic link authentication to Gatsby.

Let’s get started

a. Install Gatsby

Our current version: Gatsby CLI version: 2.12.15

b. Create New Gatsby Project

Let’s start with an empty Gatsby project and name it gatsby-cotter.

This will create a new gatsby project with the name gatsby-cotter

Head to src/pages/index.js and modify the default Gatsby homepage HTML template by copy pasting the code below:

your src/pages/index.js should be exactly like above

ERROR: It’s Ok.

You will see an error indicating that you have not specified styles.css. Create a styles.css page under src/pages/styles.css and copy the code below:

src/pages/styles.css

Integrating Cotter’s Magic Link

a. Install Cotter

npm install cotter

You may need to re run gatsby develop if you find any errors saying that you missed a few files inside node_modules. You can continue when if you don't see any errors.

b. Build the login form

Copy the code below

src/pages/index.js

Then we import Cotter.

on the beginning of src/pages/index.js

Here we initialize Cotter, then show the form.

src/pages/index.js

Replace <YOUR_API_KEY_ID> above with your API Key ID. Copy the code below to display the form.

src/pages/index.js

To authenticate your users using a magic link via email, we will be using the signInWithLink function and showEmailForm as written above.

You can send the magic link through SMS/WhatsApp as well by using showPhoneForm

Once a user is successfully authenticated, the payload will return information such as oauth_token , user's identifier (email or phone number), and Cotter's token.

You can see that showEmailForm returns a Promise, that means you can simply handle any error by chaining a catch keyword after then.

The Finish Line

Gatsby Email Link Authentication using Cotter

Done! You can now authenticate your users using a magic link without backend servers to store your users’ credentials.

Find the complete code here.

What’s next?

You may have a backend service that serves your users personalized content. If so, then you will need to validate the payload on your backend server. Then, you can send your own authentication token to the client side, or simply use our oauth_token to validate your users from now on.

Learn more about OAuth tokens returned from Cotter here to know more!

Questions & Feedback

Come and talk to the founders of Cotter and other developers who are using Cotter on Cotter’s Slack Channel.

Ready to use Cotter?

If you enjoyed this tutorial and want to integrate Cotter into your website or app, you can create a free account and check out our documentation.

If you need help ping us on our Slack channel or email us at team@cotter.app.