Case study: Connect a wallet on mobile with Tokenproof

Overview

Ever envisioned crafting a web3-first authentication experience on mobile? Well, get ready because it's easier than you think! In this blog post we’ll explore creating a mobile login with the Dynamic SDK.

‍

Let’s get started!

‍

Prerequisites

1. Ensure you have a Dynamic account and know your environment ID (found in your developer section in the Dynamic dashboard)
2. Import Dynamic from '@dynamic-labs/sdk-react' into your project and follow this guide to get started
3. Ensure you do server side verification of the JWT.

‍

Note: we assume that you’ve already successfully enabled Dynamic with your React project. If you haven’t yet, we suggest getting started here.

‍

Getting started

When integrating a Dynamic through a browser, remember that there's no direct connection between the browser and the app itself. The authentication process happens with Dynamic, and once the token is received, a query is made to the backend, leading to a deep link response which will be leveraged by the mobile app.

‍

This means that the process will work like this:

1. A user will be on your mobile app and will click “Sign in” or “Connect”. The user will be redirected to a browser hosting the Dynamic SDK.
2. Here the user will complete authentication via Dynamic SDK in the browser
3. Upon completion, a JWT will be generated and sent to your servers
4. The server will validate the JWT and if verified will respond with a deep link
5. The deep link will redirect the user to the app which will enable the user to log into.

‍

Before we dive into the details, if you want to see this in action, check out the tokenproof.xyz mobile app. Here you can see how they’ve leveraged this process to enable Dynamic both on their website and inside their mobile app.

‍

‍

Step 1: User Interaction and Redirects

The first step in the process involves setting up the user's interaction with your mobile app. The user clicks on a 'connect' button, which triggers a redirect to your web browser. This web browser hosts the Dynamic SDK.

// Let's assume this is your 'Connect' button
<TouchableOpacity
	style={styles.button}
  onPress={async () => {
  	try {
    	await Linking.openURL("https://tokenproof.xyz/enroll");
    } catch (e) {
    	console.log(e);
    }
  }}>
<Label style={styles.label}>Connect With Dynamic</Label>
</TouchableOpacity>

‍

‍

Step 2: Authentication via Dynamic SDK

Inside the browser, the user will complete authentication through the Dynamic SDK. Upon successful authentication, a JWT (JSON Web Token) is generated.

import Dynamic from '@dynamic-labs/sdk-react';

// Inside your Dynamic configuration
Dynamic.on('auth:success', ({ token }) => {  
	// Send the token to your server
	sendTokenToServer(token);}
);

‍

‍

In this snippet, `sendTokenToServer` is a function that you would define to handle sending the token to your server.

‍

Step 3: Server-side Verification and Deep Link Response

Once your server receives the JWT, it verifies the token. If the JWT is valid, the server responds with a deep link. This deep link redirects the user back to your mobile app and allows them to log in.

const jwt = require('jsonwebtoken');

// Server-side
jwt.verify(token, publicKey, function(err, decodedToken) {
	if (!err) {
  	// Respond with a deep link
    respondWithDeepLink(decodedToken.user);
  }
});

‍

‍

Here, `respondWithDeepLink` is a function that you would define to generate the deep link based on the user's data.

‍

Step 4: Redirect back to the Mobile App through a Deep Link

At this step of the process, there are various ways to deeplink back to your mobile app. tokenproof elected to use firebase’s dynamic link, where they have rendered a button that opens the app and exchanges that code for a tokenproof credential.

<a href="tokenproof://auth/dynamic/ugt3hxm5GEA1cpabjb2pqn4FDN">
	Continue on the tokenproof app
</a>

‍

Next steps

Integrating Dynamic in your mobile app is a straightforward process. By ensuring a seamless transition between your app, the browser, and the backend, you can enhance the user experience significantly. 

‍

The key to this process is the successful generation, transmission, and verification of the JWT, which securely handles user authentication. This approach leverages the robustness of Dynamic, making it an efficient method for developers to authenticate users in their mobile applications.

‍

Once you finish implementation, a few key things to explore are:

1. Customization of the UI
2. Multi-wallet support
3. Embedded wallet