✨ Magic Login Form
pnp == plug n' play: A lightweight connector that wraps Magic JS authentication with a beautiful, functional out-of-the-box login form.
License · Changelog · Contributing Guide
📖 Documentation
See the developer documentation to learn how you can build with Magic Login Form in a matter of minutes.
⚡️ Quick Start (using <script> tags)
Sign up or log in to the developer dashboard to receive API keys that will allow your application to interact with Magic's authentication APIs.
- Add the login form script
Create a new login page and add the script tag below. Your API key can be found on the Home page of your Magic Dashboard.
<!-- /login.html -->
<script
src="https://auth.magic.link/pnp/login"
data-magic-publishable-api-key="[YOUR_PUBLISHABLE_API_KEY_HERE]"
data-terms-of-service-uri="/path/to/your/terms-of-service"
data-privacy-policy-uri="/path/to/your/privacy-policy"
data-redirect-uri="/callback"> <!-- Replace with the location of your callback.html -->
</script>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.
- 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>Voila!
(Really, though, that's it!)