Custom UI

Custom UI

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.

01import { Magic } from 'magic-sdk';
02const magic = new Magic('YOUR_PUBLIC_API_KEY');
04await magic.loginWithMagicLink({
05  email,
06  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.

Did you find what you were looking for?

Custom UI

Did you find what you were looking for?