Expo (React Native)

Read the full documentation or download a sample application from GitHub.

​

Register Your Application in Criipto Verify

After you signed up for Criipto Verify, you must register an application before you can try logging in with any eID.

Once your application is registered, the dashboard will contain the necessary details to configure your application to communicate with Criipto Verify. You will need the following information from the General tab of your application settings:

• Client ID to identify your application to Criipto Verify.
• Domain on which you will be communicating with Criipto Verify.

​

Register callback URLs

Before you can start sending authentication requests to Criipto Verify, you need to register the URLs on which you want to receive the returned JSON Web Token, JWT.

The callback URL of your application is the URL where Criipto Verify will redirect to after the user has authenticated in order for the OpenID Connect middleware to complete the authentication process.

You will need to add this URL to the list of allowed URLs for your application.

For example, if you are developing your application in Expo Go, the callback URL may look like this: exp://127.0.0.1:8081. Or if you've setup a custom URL scheme, it may look like yourscheme://auth/callback.

When you deploy your application to a different URL, you will also need to ensure you add that URL to the Callback URLs field in your application settings.

​

Install SDK

Using npm:

npm install @criipto/verify-expo

​

Initialize SDK with your application details

Setup the Criipto Verify SDK by wrapping your application in CriiptoVerifyProvider:

// 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="{{YOUR_CRIIPTO_DOMAIN}}"
      clientID="{{YOUR_CLIENT_ID}}"
    >
      <View>
        <LoginScreen />
        ...
      </View>
    </CriiptoVerifyProvider>
  );
}

​

Use the useCriiptoVerify() custom hook

You can now utilize the useCriiptoVerify() custom hook to handle the authentication flow in your application. useCriiptoVerify() provides access to:

• the login method, which initiates the authentication process. It requires two arguments: acrValues to define the eIDs you want to use, and redirectUri for the callback URL.
• claims variable that allows to retrieve information about the user's JWT claims once they are available.
• the logout method.
• error variable for any potential authentication errors.

// src/LoginScreen.jsx
export default function LoginScreen() {
  const { login, claims, logout, error } = useCriiptoVerify();

  // Your function to handle the authentication process
  const handlePress = async (acrValues) => {
    try {
      // Call the login function with necessary parameters
      const redirectUri = Linking.createURL('/auth/callback');
      const result = await login(acrValues, redirectUri);
      console.log(result);
      // Do something with the authentication result
    } catch (error) {
      // Handle errors that may occur during authentication
      console.error('Authentication Error:', error);
    }
  };
  ...
}

​

Implement the UI components

You can now implement the UI components (buttons, links, etc.) to enable your users to log in with the eID of your choice. In the sample code below we used buttons, but you can choose the appropriate UI elements based on your application's requirements.

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

  const handlePress = async (acrValues) => {
    try {
      const redirectUri = Linking.createURL('/auth/callback');
      const result = await login(acrValues, redirectUri);
      console.log(result);
    } catch (error) {
      console.error('Authentication Error:', error);
    }
  };

  return (
    <>
      <Button
        onPress={() => handlePress('urn:grn:authn:dk:mitid:substantial')}
        title="Login with Danish MitID"
      />
      <Button
        onPress={() => handlePress('urn:grn:authn:se:bankid:same-device')}
        title="Login with Swedish BankID"
      />
      <Button
        onPress={() => handlePress('urn:grn:authn:fi:bank-id')}
        title="Login with Finnish BankID"
      />
      <Button
        onPress={() => handlePress('urn:grn:authn:no:bankid:substantial')}
        title="Login with Norwegian BankID"
      />

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

      {claims ? <Text>{JSON.stringify(claims, null, 2)}</Text> : null}
    </>
  );
}

​

App switch support

@criipto/verify-expo supports app switching for Swedish BankID and Danish MitID.

​

Danish MitID + Android

Switchback from the Danish MitID mobile application will only work if you are using a universal link / app link as your redirect_uri.

You can enable switchback on Android by adding the following to your app.json:

"plugins": [
  ["@criipto/verify-expo", {
    "androidAppLinks": [
      "https://..."
    ]
  }]
]

Expo Go

Danish MitID on Android will not work with Expo Go due to the use of createTask: false. You must use a build to test, for instance with npx expo run:android