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');
03
04await magic.loginWithMagicLink({
05 email,
06 showUI: false, // Default "true", setting "false" will hide loading screen
07});
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.