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.
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.
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});