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

Login with Magic Link

To completely hide Magic's Pending Modal UI, you can simply pass the showUI argument with the value false while initiating the Magic link login.

Javascript
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 Magic's loading modal
07});

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

Login with Email OTP

The email OTP login method also takes the showUI argument. Passing the value false will hide the Magic OTP modal and you can handle the events to create your own UI.

Javascript
01import { Magic } from 'magic-sdk';
02const magic = new Magic('YOUR_PUBLIC_API_KEY');
03
04// Initiate login flow
05const login = magic.auth.loginWithEmailOTP({ email: "hello@example.com", showUI: false });
06
07login
08.on('email-otp-sent', () => {
09  // The email has been sent to the user
10
11  // Prompt the user for the OTP
12  const otp = window.prompt('Enter Email OTP');
13
14  // Send the OTP for verification
15  login.emit('verify-email-otp', otp);
16})
17.on('invalid-email-otp', () => {
18  // User entered invalid OTP
19
20  /* 
21    Have the user retry entering the OTP.
22    Then emit the "verify-email-otp" event with the OTP.
23  */
24
25  /*
26    You may limit the amount of retries and
27    emit a "cancel" event to cancel the login request.
28  */
29
30  // cancel login request
31  login.emit('cancel');
32})
33.on('done', (result) => {
34  // is called when the Promise resolves
35
36  // convey login success to user
37  alert('Login complete!');
38  
39  // DID Token returned in result
40  const didToken = result;
41})
42.on('error', (reason) => {
43  // is called if the Promise rejects
44  console.error(reason);
45})
46.on('settled', () => {
47  // is called when the Promise either resolves or rejects
48});

Did you find what you were looking for?

Custom UI

Did you find what you were looking for?