Mobile

In Mobile, since we are in the web app authentication flow and web views are not recommended ways for authentication. We wrapped the implementation of authentication in our Leap auth web app (At present we support only web3auth for mobile).

At present minting an NFT in mobile, we are supporting via few and far.

• Leap Stage - stage-auth.leapwallet.io

• Leap Production - auth.leapwallet.io

To integrate into your mobile app, follow the below steps.

Step 1

We would recommend you open leap auth URLs in the following way.

• Android - Chrome custom tabs
• iOS - Safari Services / Authentication Services
• React Native - In-app browser

Step 2

Open the Leap Auth URL with the leapConfig param.

https://stage-auth.leapwallet.io

1. Create a config JSON object of the below format

Basic Config

{ 
    auth_service: 'web3auth',
    authConfig: { 
      appName: "YOUR_APP_NAME",  
      theme: 'dark', 
      isRedirect: true,
      web3AuthNetwork: "mainnet", 
      domain: 'https://auth.leapwallet.io',
    },
    tenantId: "TENANT_ID",
    clientId: "CLIENT_ID",
    networkId: "mainnet",
    leapRedirectURL: "DEEP_LINK"
    collectionId: 2
    nftText: "NFT Name"
  }

• auth_service - The Auth service to be used, currently we are supporting web3auth in mobile view

• authConfig - The basic config information needs to be bassed to Web3auth

• appName - Name of your application

• theme - Theme of your application, based on it web3auth will apply the theme to their screen

• isRedirect - We need to redirect to web3auth login instead of pop-up mode which will not work on mobile

• Web3AuthNetwork - The network of web3auth to be used, it is recommended to use testnet and aqua

• tenantId - The tenantId provided by leap, contact us at [e-mail]

• clientId - The clientId provided by leap, contact us at [e-mail]

• networkId - mainnet or testnet

• leapRedirectURL - The deep link of your application to which the control needs to get back.

• collectionId - The few and far collection ids provided by leap, contact us at [e-mail]

1. JSONStringify the Object.

const stringified = JSON.stringify(config);

1. Encode the URIComponent in the String

const encodedURIComponents = encodeURIComponent(stringified);

1. Encode the object from base64toASCII

const encodedConfig = btoa(encodedURIComponents)

1. Add the param name leapConfig

const url = `https://stage-auth.leapwallet.io/?leapConfig=${encodedConfig}`

Step 3

Once the authentication is successful and the wallet is created, Leap auth will redirect the user to leapRedirectUrl with the following params

• LeapNearAddress - Wallet Address

Advanced Config

In advanced config, you can provide your own firebase and web3Auth configs

• Follow this link https://web3auth.io/docs/guides/firebase to generate your Firebase and Web3Auth configs.
• Pass the information below

{ 
    auth_service: "web3Auth" 
    ...   
    authConfig: { 
      firebaseConfig: {
        ...
      },
      Web3AuthClientId: 'WEB3_AUTH_CLIENT_ID',
      JWTVerifier: {
        name: "YOUR_APPLICATION_NAME",
        verifier: "VERIFIER_NAME",
        typeOfLogin: "jwt",
        clientId: 'WEB3_AUTH_CLIENT_ID'
      }
    },
    ...
  }

• firebaseConfig - The firebase config which shows in your firebase login for web integration code.

• Web3AuthClientId - The client Id is shown in your web3Auth Plug&Play section

• JWTVerifier.verifier - The Verifier name shown in your web3Auth CustomAuth section

Examples

• React Native