For sites that want to have their users authenticate without passwords, Outseta offers integration with Magic.link. If you choose to use this method of authentication:

  1. Users sign up with Outseta's sign-up embed
  2. Users login with the Magic.link provider
  3. Users manage their subscription with Outseta's profile embed

Magic.Link's own documentation can be found here.

The steps required to perform this integration are as follows:

Configure Outseta Settings

Start by configuring the following settings on the AUTH > SIGN UP AND LOGIN page:

  • Turn the Send sign up confirmation email toggle to: Off
  • Set the Post Sign Up URL to a page on your website (typically a thank you page) that confirms for the user that their account has been created. This page should also present the user with the passwordless login form for Magic.Link.

Additionally you'll need to enter the Publishable API Key and Secret Key provided by Magic.Link on the SETTINGS > INTEGRATIONS > MAGIC.LINK page.

Create the Magic.link login form

There are two options on how to create the Magic.link login form. 

1. Use the plug-and-play form

If you can dedicate a separate page to the Magic.link login form, you can add this script to the <head> of that login page:

<script
    src="https://auth.magic.link/pnp/login"
    data-magic-publishable-api-key="pk_live_YOUR_API_KEY"
    data-redirect-uri="/dashboard">
</script>

2. Attach an event handler to a custom form

You can create your own form that accepts an email address and triggers a Magic.link login via their JavaScript API. To do so, add the following to the <head> of your login page:

⁠<!-- Get Magic SDK -->
<script src="https://auth.magic.link/sdk"></script>

<!-- Initialize Magic -->
<script>
const magic = new Magic('your_publishable_api_key');
</script>

Then, add the following to the <body> of your login page, customizing the form as necessary to match the style of your site:

<form>
  <input id="txtEmail"
         type="email"
         placeholder="Email"
         required />
  <input id="btnEmailSubmit"
         type="submit"
         value="Login with Magic.link" />
</form>

<script>
document
  .getElementById('btnEmailSubmit')
  .addEventListener('click', (e) => {
    e.preventDefault();
    magic.auth
      .loginWithMagicLink({
        email: document.getElementById('txtEmail').value,
      })
      .then((idToken) => {
        return Outseta.setMagicLinkIdToken(idToken);
      })
      .then(() => {
        // Take user to the dashboard page once they're
        // logged in.
        window.location.href = '/dashboard';
      })
      .catch(error => {
        console.log('Error while logging in: ', error);
      });
  });
</script>

Integrate Outseta's Embeds

You should follow our standard installation to integrate Outseta with your website.

If you need any help setting up passwordless authentication with these providers, please email support(at)outseta.com.