A Guide to Integrating Swedish BankID Into a React Native (+Expo) Application

Do you need to integrate Swedish BankID into your React Native & Expo project?

Criipto’s newly released SDK is here to simplify the process. The integration can be completed in no time and gives your users a smooth authentication experience.

In this blog post, we’ll show you how straightforward the integration is with Criipto Verify by enhancing a mobile application with a secure and effortless authentication.

The process has three steps:

1. Create a new application in the Criipto Dashboard.
2. Install the SDK with npm and initialize it with our application details. Add a few lines of code to render the login component for Swedish BankID and retrieve the JWT claims with user information. 
3. With the integration completed, we’ll be able to perform test logins right away.

By integrating Swedish BankID through Criipto, you can automatically leverage app switching, which lets users switch between your app and the BankID app to authenticate, no browser required.

We’ve included a video at the end to demonstrate the seamless login journey powered by Swedish BankID and Criipto.

Now, let's look at each integration step in detail.

Step 1: Register a new login application 

First, let’s create a new login application on the Criipto Dashboard. 

We'll choose a domain and a client ID for our application. Selecting Native -> Expo (React Native) as a technology will point us to the relevant integration guide. 

Once the application is registered, we'll need the following information from the General tab of our application settings:

• Client ID to identify our app to Criipto Verify. We chose urn:cool-energy:expo:bankid.
• Domain on which we will be communicating with Criipto Verify. 
  We'll use cool-energy-test.criipto.id.

One last step involves adding a callback URL for our application. This URL is where Criipto Verify will redirect the user upon successful authentication. It's also the destination where the application will receive a JSON Web Token with user information.

We’re developing with Expo Go, so we’ll use exp://127.0.0.1:8081/auth/callback as the callback URL. 

If you set up a custom URL scheme, your callback URL may look something like this: yourscheme://auth/callback.

Step 2: Install, initialize, and use the SDK in your application

Let’s head to our code editor and install the Criipto Verify Expo SDK with npm:

npm install --save @criipto/verify-expo

Then set up the SDK by wrapping our application in CriiptoVerifyProvider. We’ll use the domain and clientID of the application we just configured:

// src/App.jsx
import { View} from 'react-native';
import LoginScreen from './LoginScreen.jsx';
import {CriiptoVerifyProvider, useCriiptoVerify} from '@criipto/verify-expo';

export default function App() {
  return (
    <CriiptoVerifyProvider
      domain="cool-energy-test.criipto.id"
      clientID="urn:cool-energy:expo:bankid"
    >
      <View>
        <LoginScreen />
        ...
      </View>
    </CriiptoVerifyProvider>
  );
}

We can now leverage the useCriiptoVerify() custom hook to handle the authentication flow. Here is a simplified example of a function we can use:

// src/LoginScreen.jsx  
export default function LoginScreen() {
    const { login, claims, error } = useCriiptoVerify();
  
    const handlePress = async () => {
      try {
        const acrValues = 'urn:grn:authn:se:bankid:same-device';
        const redirectUri = 'exp://127.0.0.1:8081/auth/callback';
        const result = await login(acrValues, redirectUri);
        console.log(result);
      } catch (error) {
        console.error('Authentication Error:', error);
      }
    };
 
  ... 
  }

We used the login method to initiate the authentication process, passing the two required arguments:
 
acrValues to specify the eID we want to use
redirectUri for the callback URL

Finally, let’s add a UI element that will use the function we just created, allowing our users to log into our app with Swedish BankID. We’ll also render JWT claims and handle potential authentication errors: 

export default function LoginScreen() {
  const { login, claims, error } = useCriiptoVerify();

  const handlePress = async () => {
    try {
      const redirectUri = 'exp://127.0.0.1:8081/auth/callback';
      const acrValues = 'urn:grn:authn:se:bankid:same-device';
      const result = await login(acrValues, redirectUri);
    } catch (error) {
      console.error('Authentication Error:', error);
    }
  };

  return (
    <>
      <Pressable onPress={handlePress}>
        <Image source={BankIdLogo} />
        <Text>Login with BankID</Text>
      </Pressable>

      {error ? <Text>An error occurred: {error.toString()}</Text> : null}

      {claims ? (
        <View>
          <Text> Name: {claims.name}</Text>
          <Text> SSN: {claims.ssn}</Text>
          <Text> Country: {claims.country}</Text>
        </View>
      ) : null}
    </>
  );
}

With this minimal setup, we can already try logging in with the Swedish BankID. (We just need a test version of the BankID app and a test user.)

Step 3: Experience the authentication flow with test logins

Want to see the login experience of our Expo application in action? Take a look at the video below.

If you're keen to try it out yourself, you can download a sample app from GitHub.