How do you build BankID login in Next.js and React?

How the flow works

1. 01

   Start the order on the server

   Your API route calls BankID's auth endpoint with the end user's IP address and gets an order reference plus the values needed for the QR code and the app link.

2. 02

   Show an animated QR code or open the app

   The server generates a fresh QR code every second from those values, and the page fetches and shows it. On the same device, the page opens the BankID app with the autostart token instead.

3. 03

   Poll for the status

   The server calls BankID's collect for the order about every two seconds and maps each hintCode to BankID's recommended user messages, such as asking the user to start the app. If the QR code isn't scanned in time, the order fails and the user needs a new one.

4. 04

   Create your own session

   When collect returns complete, the server checks that the order belongs to the browser session that started it (keep the orderRef server-side and never accept one from the page), then creates its own session and stores only the identity data it needs.

5. 05

   Cancel abandoned orders

   If the user cancels or leaves the page while the order is pending, call cancel, so the next attempt starts cleanly.

Common mistakes

• —

  Calling BankID from the browser

  The relying-party certificate must never leave the server. Every call to BankID goes through your backend.

• —

  A static QR code

  BankID requires an animated QR code; static QR codes are no longer supported. Each new code is generated on the server from the order's secret and the seconds since the order started, so a copied code, for example in a screenshot, quickly stops working. Keep the secret on the server and send the page only the finished code.

• —

  Treating login as permission

  BankID tells you who the person is, not what they may access. That is your access model's job, enforced in the backend and, ideally, in the database.

• —

  Personal identity numbers in logs

  The personal identity number is personal data, and under the Swedish Data Protection Act (chapter 3, section 10) it may be processed without consent only when clearly justified by the purpose, the importance of secure identification or another considerable reason. Write down why you need it, keep it out of logs, analytics and URLs, key accounts on your own internal ID, and store the number only where you need it.

• —

  Calling BankID from the Edge runtime

  BankID identifies your service by its client certificate over mutual TLS, which the Edge runtime can't present. Keep the calls in Route Handlers or Server Actions on the Node.js runtime (the default), and take endUserIp from your proxy's forwarded header, not the server's own address.

Questions

What do we need to use BankID in production?

An agreement with a bank that offers BankID to companies, which gives you a production certificate, or an identity service provider that handles the integration for you. Development and testing use BankID's test environment, a test certificate and a test BankID.

Should we integrate directly or use an identity provider?

An identity provider is faster to start with and handles the certificate and API for you, for a fee. A direct integration gives you full control, but you own the certificate and its security.

Can an AI agent or chatbot use BankID?

BankID can verify who the person is before an agent acts for them, for example before it shows order history. The agent should then get only the permissions the verified user has, checked in your backend.

Does BankID work on both mobile and desktop?

Yes. On a computer the user scans the animated QR code with the BankID app on their phone; on a phone the page opens the BankID app directly.