Customize the Magic user onboarding experience.

Magic includes a default pending modal UI to save developers implementation time and to get passwordless login working ASAP. But we also allow developers to have full customizability of their user on-boarding experience.

Default branding

#Customize the UI & email

You can customize the logo and colors of the Magic link email, confirmation screen, and pending modal on the Branding tab in the Magic Dashboard:

App with customized branding

#Custom email HTML template

(You'll be able to set a custom html template for the Magic link email soon!)

#Bring your own UI

To completely hide away our Pending Modal UI, you can simply pass false to the showUI attribute while initiating the Magic link login.

import { Magic } from 'magic-sdk';

const magic = new Magic('YOUR_PUBLIC_API_KEY');

await magic.loginWithMagicLink({

  email,

  showUI: false, // Default "true", setting "false" will hide loading screen

});

Note: If you utilize the optional redirectURI feature , after clicking the email link, the confirmation page is skipped altogether and the user is redirected back to your application.