https://github.com/magiclabs/example-custom-email-otp
A white label login flow using Email OTP .
https://github.com/magiclabs/example-custom-email-otp
Last synced: about 1 year ago
JSON representation
A white label login flow using Email OTP .
- Host: GitHub
- URL: https://github.com/magiclabs/example-custom-email-otp
- Owner: magiclabs
- Created: 2023-04-03T22:17:17.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2024-08-26T19:09:39.000Z (almost 2 years ago)
- Last Synced: 2024-08-26T22:23:00.854Z (almost 2 years ago)
- Language: JavaScript
- Size: 1.21 MB
- Stars: 1
- Watchers: 5
- Forks: 2
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Custom UI Email Login with Magic Dedicated Wallet and One-Time Password (OTP)
Magic is a passwordless authentication sdk that supports passwordless email login via one-time passwords (OTP). This app will walk through implementing logins via email with OTP using your own UI.
> 🌐 **Live Demo → https://b2gzt5.csb.app/**
# Quick Start Instructions
```
$ git clone git@github.com:magiclabs/example-custom-email-otp.git
$ cd example-custom-email-otp
$ yarn install
$ yarn start
```
> app starts on http://localhost:3000
## Environment Variables
Replace the API keys in `.env` with your own:
```
REACT_APP_MAGIC_PUBLISHABLE_KEY=pk_live_123...
```
## Event Handling
There are two flows demonstrated in this app for which events must be handled to successfully authenticate a user. The main flow is the login flow, the other is the device verification flow.
## Events
**Email OTP**
| Event Name | Definition |
| ------------------- | ------------------------------------------------------------------------------- |
| `email-otp-sent` | Dispatched when the OTP email has been successfully sent from the Magic server. |
| `verify-email-otp` | Emit along with the OTP to verify the code from user. |
| `invalid-email-otp` | Dispatched when the OTP sent fails verification. |
| `cancel` | Emit to cancel the login request. |
**Device Verification**
| Event Name | Definition |
| ---------------------------------- | ---------------------------------------------------------------------- |
| `device-needs-approval` | Dispatched when the device is unrecognized and requires user approval. |
| `device-verification-email-sent` | Dispatched when the device verification email is sent. |
| `device-approved` | Dispatched when the user has approved the unrecongized device. |
| `device-verification-link-expired` | Dispatched when the email verification email has expired. |
| `device-retry` | Emit to restart the device registration flow. |
**Multi-Factor Auth**
| Event Name | Definition |
| -----------------------------| ---------------------------------------------------------------------- |
| `mfa-sent-handle` | Dispatched when the MFA OTP is ready to be received. |
| `verify-mfa-code` | Emit along with the MFA OTP to verify the code from user. |
| `invalid-mfa-otp` | Dispatched when the MFA OTP sent fails verification. |
| `recovery-code-sent-handle` | Dispatched when the MFA recovery code is ready to be received. |
| `invalid-recovery-code` | Dispatched when the incorrect MFA recovery code is submitted. |
| `recovery-code-success` | Dispatched when the MFA MFA recovery code is successfully submitted. |