Typescript Types
Typescript Types
#Overview
Below are the most common types in Magic's Typescript SDK, separated by module.
To view all supported types, feel free to explore the Magic SDK repo.
#User Module
#MagicUserMetadata
Typescript
01export interface MagicUserMetadata {
02 issuer: string | null;
03 publicAddress: string | null;
04 email: string | null;
05 phoneNumber: string | null;
06 isMfaEnabled: boolean;
07 recoveryFactors: [RecoveryFactor];
08}
#RecoveryMethodType
Typescript
01export enum RecoveryMethodType {
02 PhoneNumber = 'phone_number',
03}
#RecoveryFactor
Typescript
01type RecoveryFactor = {
02 type: RecoveryMethodType;
03 value: string;
04};
#GetIdTokenConfiguration
Typescript
01export interface GetIdTokenConfiguration {
02 /**
03 * The number of seconds until the generated ID token will expire.
04 */
05 lifespan?: number;
06}
#GenerateIdTokenConfiguration
Typescript
01export interface GenerateIdTokenConfiguration extends GetIdTokenConfiguration {
02 /**
03 * An optional piece of data to sign with the token. Note, however, that the
04 * unsigned data _will not_ be encoded in the token, only an encrypted
05 * signature of the data.
06 */
07 attachment?: string;
08}
#UpdateEmailConfiguration
Typescript
01export interface UpdateEmailConfiguration {
02 /**
03 * The new email address to update to
04 */
05 email: string;
06
07 /**
08 * When `true`, a pre-built pending modal interface will
09 * guide the user to check their new, followed by old emails
10 * for confirmation emails.
11 */
12 showUI?: boolean;
13}
#UpdateWebAuthnInfoConfiguration
Typescript
01export interface UpdateWebAuthnInfoConfiguration {
02 /**
03 * WebAuthn info id
04 */
05 id: string;
06
07 /**
08 * nickname that user attempts to update to the webauth device associate to the id.
09 */
10 nickname: string;
11}
#RecoverAccountConfiguration
Typescript
01export interface RecoverAccountConfiguration {
02 /**
03 * The email to recover
04 */
05 email: string;
06}
#ShowSettingsConfiguration
Typescript
01export interface ShowSettingsConfiguration {
02 /**
03 * deep linking destination
04 */
05 page: DeepLinkPage;
06}
#Wallet Module
#GasApiResponse
Typescript
01export type GasApiResponse = {
02 request_id: string;
03 state: string;
04 success: boolean;
05};
#AccessListEntry
Typescript
01export type AccessListEntry = { address: string; storageKeys: Array<string> };
#AccessList
Typescript
01export type AccessList = Array<AccessListEntry>;
#GaslessTransactionRequest
Typescript
01export interface GaslessTransactionRequest {
02 /**
03 * The transaction type.
04 */
05 type?: number;
06
07 /**
08 * The target of the transaction.
09 */
10 to?: string;
11
12 /**
13 * The sender of the transaction.
14 */
15 from?: string;
16
17 /**
18 * The nonce of the transaction, used to prevent replay attacks.
19 */
20
21 nonce?: number;
22
23 /**
24 * The maximum amount of gas to allow this transaction to consime.
25 */
26 gasLimit?: bigint;
27
28 /**
29 * The gas price to use for legacy transactions or transactions on
30 * legacy networks.
31 *
32 * Most of the time the ``max*FeePerGas`` is preferred.
33 */
34 gasPrice?: bigint;
35
36 /**
37 * The [[link-eip-1559]] maximum priority fee to pay per gas.
38 */
39 maxPriorityFeePerGas?: bigint;
40
41 /**
42 * The [[link-eip-1559]] maximum total fee to pay per gas. The actual
43 * value used is protocol enforced to be the block's base fee.
44 */
45 maxFeePerGas?: bigint;
46
47 /**
48 * The transaction data.
49 */
50 data?: string;
51
52 /**
53 * The transaction value (in wei).
54 */
55 value?: bigint;
56
57 /**
58 * The chain ID for the network this transaction is valid on.
59 */
60 chainId?: bigint;
61
62 /**
63 * The [[link-eip-2930]] access list. Storage slots included in the access
64 * list are //warmed// by pre-loading them, so their initial cost to
65 * fetch is guaranteed, but then each additional access is cheaper.
66 */
67 accessList?: AccessList;
68
69 /**
70 * A custom object, which can be passed along for network-specific
71 * values.
72 */
73 customData?: any;
74}
#Auth Module
#LoginWithMagicLinkConfiguration
Typescript
01export interface LoginWithMagicLinkConfiguration {
02 /**
03 * The email address of the user attempting to login.
04 */
05 email: string;
06
07 /**
08 * When `true`, a pre-built modal interface will show to the user, directing
09 * them to check their email for the "magic link" to complete their
10 * authentication.
11 */
12 showUI?: boolean;
13
14 /**
15 * You can optionally provide a redirect URI that will be followed at the end
16 * of the magic link flow. Don't forget to invoke
17 * `magic.auth.loginWithCredential()` to complete the login from the route you
18 * configure here.
19 */
20 redirectURI?: string;
21
22 /**
23 * Enterprise users with a custom SMTP can create custom email templates
24 * from their dashboard. The default Magic loginWithMagicLink email will be
25 * overriden when a variation is passed here.
26 */
27 overrides?: {
28 variation?: string;
29 };
30}
#LoginWithSmsConfiguration
Typescript
01export interface LoginWithSmsConfiguration {
02 /**
03 * Specify the phone number of the user attempting to login.
04 */
05 phoneNumber: string;
06}
#LoginWithEmailOTPConfiguration
Typescript
01export interface LoginWithEmailOTPConfiguration {
02 /**
03 * Specify the email address of the user attempting to login.
04 */
05 email: string;
06
07 /**
08 * When `true`, a pre-built modal interface will show to the user, directing
09 * them to check their email for the one time passcode (OTP) to complete their
10 * authentication.
11 *
12 * When `false`, developers will be able to implement their own custom UI to
13 * continue the email OTP flow.
14 */
15 showUI?: boolean;
16
17 /**
18 * Device Unrecognized UI will enforce showing up to secure user's login
19 *
20 * When set to true (default), an improved device recognition UI will be displayed to the user,
21 * prompting them to verify their login by checking their email for device approval. This feature
22 * enhances authentication security.
23 *
24 * This param will only be affect if showUI is false. When set to false,
25 * developers have the flexibility to implement their own customized UI to
26 * handle device check events, providing a more tailored user experience.
27 */
28 deviceCheckUI?: boolean;
29
30 /**
31 * Enterprise users with a custom SMTP can create custom email templates
32 * from their dashboard. The default Magic loginWithOTP email will be
33 * overriden when a variation is passed here.
34 */
35 overrides?: {
36 variation?: string;
37 };
38}
#EventHandlers
Typescript
01export type LoginWithMagicLinkEventHandlers = {
02 // Event Received
03 [LoginWithMagicLinkEventOnReceived.EmailSent]: () => void;
04 [LoginWithMagicLinkEventOnReceived.EmailNotDeliverable]: () => void;
05
06 // Event sent
07 [LoginWithMagicLinkEventEmit.Retry]: () => void;
08} & DeviceVerificationEventHandlers;
09
10export type LoginWithEmailOTPEventHandlers = {
11 // Event Received
12 [LoginWithEmailOTPEventOnReceived.EmailOTPSent]: () => void;
13 [LoginWithEmailOTPEventOnReceived.InvalidEmailOtp]: () => void;
14 [LoginWithEmailOTPEventOnReceived.ExpiredEmailOtp]: () => void;
15
16 // Event sent
17 [LoginWithEmailOTPEventEmit.VerifyEmailOtp]: (otp: string) => void;
18 [LoginWithEmailOTPEventEmit.Cancel]: () => void;
19} & DeviceVerificationEventHandlers;
20
21type DeviceVerificationEventHandlers = {
22 // Event Received
23 [DeviceVerificationEventOnReceived.DeviceNeedsApproval]: () => void;
24 [DeviceVerificationEventOnReceived.DeviceVerificationEmailSent]: () => void;
25 [DeviceVerificationEventOnReceived.DeviceVerificationLinkExpired]: () => void;
26 [DeviceVerificationEventOnReceived.DeviceApproved]: () => void;
27
28 // Event sent
29 [DeviceVerificationEventEmit.Retry]: () => void;
30};
#Auth Events Enum
Typescript
01export enum LoginWithMagicLinkEventEmit {
02 Retry = 'retry',
03}
04
05export enum LoginWithMagicLinkEventOnReceived {
06 EmailSent = 'email-sent',
07 EmailNotDeliverable = 'email-not-deliverable',
08}
09
10export enum LoginWithEmailOTPEventEmit {
11 VerifyEmailOtp = 'verify-email-otp',
12 Cancel = 'cancel',
13}
14
15export enum LoginWithEmailOTPEventOnReceived {
16 EmailOTPSent = 'email-otp-sent',
17 InvalidEmailOtp = 'invalid-email-otp',
18 ExpiredEmailOtp = 'expired-email-otp',
19}
20
21export enum DeviceVerificationEventEmit {
22 Retry = 'device-retry',
23}
24
25export enum DeviceVerificationEventOnReceived {
26 DeviceApproved = 'device-approved',
27 DeviceNeedsApproval = 'device-needs-approval',
28 DeviceVerificationLinkExpired = 'device-verification-link-expired',
29 DeviceVerificationEmailSent = 'device-verification-email-sent',
30}
#NFT Module
#NFTPurchaseRequest
Typescript
01export interface NFTPurchaseRequest {
02 nft: {
03 name: string;
04 imageUrl: string;
05 blockchainNftId: string;
06 contractAddress: string;
07 network: string;
08 platform: string;
09 type: string;
10 };
11 identityPrefill: {
12 firstName: string;
13 lastName: string;
14 dateOfBirth: string; // YYYY-MM-DD
15 emailAddress: string;
16 phone: string;
17 address: {
18 street1: string;
19 street2: string;
20 city: string;
21 regionCode: string;
22 postalCode: string;
23 countryCode: string;
24 };
25 };
26}
#NFTCheckoutRequest
Typescript
01export interface NFTCheckoutRequest {
02 // given by magic / found in the developer dashboard in future
03 contractId: string;
04 // in contract, if ERC1155… for ERC721, use token ID = 0
05 tokenId: string;
06 name: string;
07 imageUrl: string;
08 quantity?: number; // default is 1
09 walletAddress?: string; // default is user's wallet address
10}
#NFTTransferRequest
Typescript
01export interface NFTTransferRequest {
02 tokenId: string;
03 contractAddress: string;
04 quantity?: number;
05 recipient?: string;
06}
#Responses and ResponseStatus
Typescript
01export type NFTResponseStatus = 'cancelled' | 'processed' | 'declined' | 'expired';
02
03export type NFTResponse = {
04 status: NFTResponseStatus;
05};
06
07export type NFTPurchaseResponse = NFTResponse & {
08 errorMessage?: string;
09};
10
11export type NFTCheckoutResponse = NFTResponse;
12
13export type NFTTransferResponse = NFTResponse;