Add Magic Links to Your Node.js App Using WorkOS

November 4, 2021

If your SaaS product is built with Node.js and you want to incorporate Magic Links into your users’ sign-on experience, you can do a dry-run of WorkOS’ Magic Link integration on our example Node.js app which makes use of the WorkOS Node.js SDK

If you get stuck while following the steps below and aren't able to resolve the issue by reading our API reference or Magic Link Setup Guide, reach out to us at [email protected] so we can help!

Prerequisites

  • Node.js version 10+
  • npm or yarn (we'll use npm in this tutorial)
  • A free WorkOS account

Node Project Setup

1. In your CLI, navigate to the directory into which you want to clone this git repo.


2. Clone the main Node.js example app repo:


3. Navigate to the Node.js Magic Links example app, located within the cloned repo.

4. Install the dependencies.

Securely store the environment variables

5. Obtain and make note of your WorkOS API key and SSO-specific, WorkOS Client ID from the WorkOS Dashboard. The locations of these values are shown in the screenshots below.

6. Create a .env file in the example app’s project directory, node-directory-sync-example/. (This file is listed in this repo's .gitignore file, so your sensitive information will not be checked into version control.).


7. Open the .env file with your preferred text editor and add the WORKOS_API_KEY and WORKOS_CLIENT_ID:

Start the server

8. To ensure the example app is served as expected, start the server:

Update the Default Redirect URI

9. Update the default Redirect URI in the "Configuration" page of your WorkOS Dashboard. The URL to use is http://localhost:8000/success.

10. With the Node server running, navigate to http://localhost:8000/ and enter the email address to which you want to send the Magic Link.

11. You’ll see an example webpage that directs the user to check their email. For the sake of the tutorial, the redirect URL is also shown.

12. You can either click the link in the email or click the linked redirect URL to navigate to the “success” page, which looks like this:

Need help?

If you get stuck and aren't able to resolve the issue by reading our Magic Link Setup Guide, API reference, or tutorials, you can reach out to us at [email protected] and we'll lend a hand.


Start Integrating Today
Create an account to begin adding enterprise-ready features to your application today.
Get Started

This site uses cookies to improve your experience. Please accept the use of cookies on this site. You can review our cookie policy here and our privacy policy here. If you choose to refuse, functionality of this site will be limited.