Så här integrerar du BankID i en React Native/Expo-app

Behöver du integrera BankID i ditt React Native & Expo-projekt?

Iduras nyligen släppta SDK är här för att förenkla processen. Integrationen kan slutföras på nolltid och ger dina användare en smidig autentiseringsupplevelse.

I det här blogginlägget visar vi hur enkel integrationen är med Idura Verify genom att förbättra en mobilapplikation med en säker och enkel autentisering.

Processen består av tre steg:

1. Skapa en ny applikation i Idura Dashboard.
2. Installera SDK med npm och initiera det med våra applikationsdetaljer. Lägg till några rader kod för att rendera inloggningskomponenten för BankID och hämta JWT claims med användarinformation.
3. När integrationen är klar kommer vi att kunna utföra testinloggningar direkt.

Genom att integrera BankID via Idura kan du automatiskt utnyttja app switching, vilket gör att användare kan växla mellan din app och BankID-appen för att autentisera sig, utan att behöva använda webbläsaren.

Vi har inkluderat en video i slutet för att demonstrera den sömlösa inloggningsresan som drivs av BankID och Idura.

Låt oss nu titta på varje integrationssteg i detalj.

Steg 1: Registrera en ny inloggningsapplikation

Låt oss först skapa en ny inloggningsapplikation på Idura Dashboard.

Vi väljer en domän och ett klient-ID för vår applikation. Genom attvälja Native -> Expo (React Native) som teknik kommer vi till den relevanta integrationsguiden.

När applikationen är registrerad behöver vi följande information från fliken General i våra applikationsinställningar:

• Klient-ID för att identifiera vår app till Idura Verify. Vi valde urn:cool-energy:expo:bankid.
• Domän som vi kommer att kommunicera med Idura Verify på.
  Vi kommer att använda cool-energy-test.idura.broker.

Ett sista steg är att lägga till en callback-URL för vår applikation. Det är till den här URL:en som Idura Verify kommer att omdirigera användaren vid lyckad autentisering. Det är också den destination där applikationen kommer att ta emot en JSON Web Token med användarinformation.

Vi utvecklar med Expo Go, så vi kommer att använda exp://127.0.0.1:8081/auth/callback som callback-URL.

Om du ställer in ett anpassat URL-schema kan din URL för återuppringning se ut ungefär så här: yourscheme://auth/callback.

Steg 2: Installera, initiera och använd SDK i din applikation

Låt oss gå till vår kodredigerare och installera Idura Verify Expo SDK med npm:

npm install --save @criipto/verify-expo

Sedan konfigurerar vi SDK genom att paketera vår applikation i CriiptoVerifyProvider. Vi använder domänen och klient-ID för applikationen som vi just konfigurerade:

// 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.idura.broker"
      clientID="urn:cool-energy:expo:bankid"
    >
      <View>
        <LoginScreen />
        ...
      </View>
    </CriiptoVerifyProvider>
  );
}

Vi kan nu utnyttja den anpassade kroken useCriiptoVerify() för att hantera autentiseringsflödet. Här är ett förenklat exempel på en funktion som vi kan använda:

// 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);
      }
    };
 
  ... 
  }

Vi använde inloggningsmetoden för att initiera autentiseringsprocessen och skickade de två nödvändiga argumenten:

acrValues för att ange den e-legitimation vi vill använda
redirectUri för URL:en för återuppringning

Slutligen lägger vi till ett UI-element som kommer att använda den funktion vi just skapade, så att våra användare kan logga in i vår app med BankID. Vi kommer också att rendera JWT-anspråk och hantera potentiella autentiseringsfel:

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}
    </>
  );
}

Med den här minimala installationen kan vi redan nu försöka logga in med BankID. (Vi behöver bara en testversion av BankID-appen och en testanvändare).

Steg 3: Upplev autentiseringsflödet med testinloggningar

Vill du se inloggningsupplevelsen i vår Expo-applikation i aktion? Ta en titt på videon nedan.

Om du vill prova själv kan du ladda ner en exempelapp från GitHub.

Drivs din applikation av React Native och Expo?

Vi skulle gärna hjälpa dig att förbättra den med en säker och smidig autentiseringsupplevelse. Du kan använda BankID eller något annat eID som vi stödjer.

Låt oss arbeta tillsammans för att göra din app ännu bättre!

Criipto är nu Idura!

Du kanske stöter på criipto i våra domännamn och kodprover. Detta är förväntat eftersom vi bytte namn i November 2025.

Läs om varför vi bytte namn.