BankID Sweden Login Animation in React Native

The BankID login animation is the handoff screen that plays while Sweden’s official BankID app verifies a user: a spinner, a line of status text, and a success state when signing completes. In React Native you build that animation with Reanimated and own only the presentation. The authentication itself must run through BankID’s official API and certified flow, your app never reimplements the protocol and never touches the user’s personal number or private key. Drive the animation from the real order status that BankID reports, pending, user signing, complete, or failed, so the motion mirrors the actual flow. The login screen around it is fastest to start from a free VP0 design with Claude Code or Cursor.

How BankID login works, and what you actually animate

Your app is the front end to a flow that lives on a server. Your backend starts an authentication order with BankID and receives an orderRef, then polls BankID’s collect endpoint for status while the user approves the request in the BankID app. On the phone you open the BankID app with a deep link and animate the waiting and result states. The official BankID developer documentation defines this start-and-collect model, and following it is not optional: BankID is a regulated electronic identity used by over 8,000,000 people in Sweden, per BankID.

So the animation has a clear job: represent the order status honestly. You are not building security; you are building the feedback layer over a flow BankID controls.

Building the animation in React Native

Use Reanimated for anything beyond a basic spinner, since it runs animations on the UI thread and stays smooth while your JavaScript polls for status. A status-driven component is the cleanest shape: one piece of state, and the view reacts to it.

import Animated, { useAnimatedStyle, withRepeat, withTiming, useSharedValue } from "react-native-reanimated";

function BankIDStatus({ status }: { status: "pending" | "signing" | "done" | "failed" }) {
  const spin = useSharedValue(0);
  spin.value = withRepeat(withTiming(360, { duration: 1200 }), -1, false);
  const ring = useAnimatedStyle(() => ({ transform: [{ rotate: `${spin.value}deg` }] }));
  // pending/signing: rotating ring + status text
  // done: spring checkmark    failed: error + retry
  return <Animated.View style={ring} />;
}

Reanimated handles the looped ring and the spring on the success checkmark; keep the JavaScript side to polling and mapping status to what the user sees.

Three ways to animate the login states

Library	Best for	Control	Effort
Reanimated	Custom, smooth state transitions	Full	Medium
Animated (built in)	A simple spinner with no extra dependency	Basic	Low
Lottie	A designer-authored exact sequence	Plays the file	Low to medium

Reanimated is the default when you want the ring, the status text, and a satisfying success animation to feel native. The built-in Animated API is enough for a plain spinner. Lottie wins when a designer hands you the exact success animation and you would rather play it than rebuild it.

Driving the animation from real BankID state

The animation must follow BankID, not a timer. Map each collect status to a visual: pending shows the rotating ring, the user-sign hint shows a prompt to open BankID and confirm, complete triggers the checkmark, and a failed or expired order shows a clear retry. When you deep-link into the BankID app and the user returns, handle the app switch with Expo Linking so you resume polling rather than stranding the user on a frozen screen.

National e-ID flows share this shape. The FranceConnect mobile login flow animates the same redirect-and-return handoff, and the patterns transfer directly.

Staying compliant: what your app must never do

BankID is regulated, so the rules are firm. Your app must not collect or store the user’s personal identity number beyond what the official flow requires, must never ask for or handle the BankID security code, and must never reimplement or fake the signing step. Authentication goes through the official API and the official BankID app, full stop. Reproducing the screen for a real login outside the certified flow is both against BankID’s terms and a security risk to the user.

That boundary is also what keeps the build simple. You own the animation and the screen; BankID owns identity. If you only need a local unlock rather than national identity, a device biometric like Face ID login in Expo is the honest, lighter option.

Common mistakes

A few errors show up repeatedly. Polling the collect endpoint too aggressively gets you throttled, so respect the interval BankID specifies. Not handling the return from the BankID app leaves users on a stuck spinner after they have already approved. Animating a success state before BankID reports complete is the worst one, since it implies a login that has not happened. And hardcoding Swedish-only copy breaks the moment a non-Swedish speaker hits the screen, so localize the status text.

Building the login screen fast

The animation is a small part; the login screen, logo, explainer, the BankID button, error and retry states, is a known layout worth starting from a design. VP0 is a free, $0 iOS design library where each screen has a hidden source page an AI builder reads from a pasted link:

Build this React Native login screen.
Read the layout and tokens from this VP0 source page: <pasted VP0 link>.
Add a status-driven BankID animation with Reanimated: a rotating ring for
pending and signing, a spring checkmark for complete, and a clear retry for
failed. Drive it from a `status` prop; do not implement the auth itself.

You get the screen from the design and wire the animation to your real BankID status, which keeps the effort off the scaffolding.

What to choose

Build the animation with Reanimated, drive it from BankID’s real order status, and keep authentication entirely inside the official BankID API and app. Use the built-in Animated API only for a bare spinner, and Lottie when a designer gives you the exact sequence. Never store the personal code or private key, never fake the success state, and handle the app-switch return so polling resumes. Start the login screen from a free VP0 design, generate it with Claude Code or Cursor, and test the deep-link round trip on a real device, where the app switch behaves differently than in the simulator.

Frequently asked questions

How do I build a BankID login animation in React Native?

Build it as a status-driven component with Reanimated: a rotating ring while the order is pending or signing, a spring checkmark on complete, and a retry on failure. Drive the animation from the real status your backend gets from BankID’s collect endpoint, never from a timer. Keep the actual authentication in BankID’s official API and app, and start the login screen from a free VP0 design with Claude Code or Cursor.

Is it legal to recreate the BankID login screen?

You can build your own login screen and animation, but you must run authentication through BankID’s official API and certified flow, not a reimplementation. Your app must never collect the BankID security code, never store the private key, and never fake a successful signing. Recreating the look is fine; recreating or bypassing the security flow is not.

How do I animate the BankID states smoothly while polling?

Run the animation on Reanimated’s UI thread so it stays smooth while your JavaScript polls collect on the main thread. Map each status to a visual, handle the deep-link return from the BankID app with Expo Linking so polling resumes, and respect BankID’s polling interval so you are not throttled.

Can VP0 give me a free React Native template for the login screen?

Yes. VP0 is a free iOS design library where each login or onboarding screen has an AI-readable source page, so you can copy the link and have Claude Code or Cursor build the screen in React Native. You then add the Reanimated status animation and wire it to your BankID flow. The design provides the screen; the auth integration is yours.

What common errors happen when building this with Claude Code or Cursor?

The frequent ones are polling too fast, not handling the app-switch back from BankID, and animating success before BankID reports complete. Tell the tool to drive the animation from a status prop only, to resume polling on return, and to keep authentication in the official API. Review the generated code so it never stores the personal code or private key.