In this post, learn how to integrate Magic's custom, production-ready passwordless login to your website with just 2 script tags and a Magic account.

New to Magic? Sign up for free

Currently it only supports Web(JavaScript). Stay tuned for React Native, iOS and Android.

Step 1 - Add login form script to login page.

Create a new login page and add the script tag below:

<!-- /login.html -->
<script
  src="https://auth.magic.link/pnp/login"
  data-magic-publishable-api-key="[YOUR_PUBLISHABLE_API_KEY_HERE]"
  data-redirect-uri="/callback"> <!-- Replace with the location of your callback.html -->
</script>

Your API key can be found on the Home page of your Magic Dashboard.

This will generate a pre-built login form based on the branding and login methods you’ve enabled via Dashboard. Users will automatically be redirected to the URI provided in data-redirect-uri upon authorization. If no data-redirect-uri is specified, a relative path — /callback — is automatically used as a fallback.

Step 2 - Add the callback script

Next, create a page containing the script tag below to handle the authentication callback.

<!-- /callback.html -->
<script
  src="https://auth.magic.link/pnp/callback"
  data-magic-publishable-api-key="[YOUR_PUBLISHABLE_API_KEY_HERE]">
</script>

Try it out!

Open your login page to try out your new end-to-end Magic authentication flow.

Logging users out

You can optionally provide an endpoint in your app to log users out of their Magic session. Users will automatically be redirected to the URI provided in data-login-uri or data-redirect-uri upon successful logout. If no data-login-uri or data-redirect-uri is specified, the current value of window.location.origin is used instead.

<!-- /logout.html -->
<script
  src="https://auth.magic.link/pnp/logout"
  data-magic-publishable-api-key="[YOUR_PUBLISHABLE_API_KEY_HERE]"
  data-redirect-uri="/login"> <!-- Replace with the location of your login.html -->
</script>

To learn more about script options, customization and FAQs read here.