# Backend for Single-Page App (SPA) Frontend (BFF)

As discussed in [Integration Patterns](/learn-the-basics/integration-patterns.md), sgID does not support public clients like standalone SPAs or native mobile applications. Therefore, when using a SPA frontend, the client must also maintain a backend server which will interact with the sgID server instead of the frontend. This design pattern is known as **backend for frontend** (**BFF**).

## Typical Flow

1. The SPA frontend requests a sgID authorization URL from the backend server
2. The SPA triggers a browser redirect to the sgID authorization URL, where a QR code is rendered&#x20;
3. The end user authorizes the transaction by scanning the QR code with their Singpass mobile app, and consents to share their data with the client application
4. Upon successful authorization, the sgID server sends the registered redirect / callback URL (associated with the web server) to the browser, which redirects to that URL. This URL should be associated with the backend server
5. The backend server receives the authorization code in the callback URL and exchanges it for an access token and ID token using its client ID and client secret
6. The backend server then uses the access token to obtain the end user's data from the sgID server `userinfo` endpoint
7. The backend server will then authenticate the end user's SPA session, and subsequently log the end user into their app.

## Complete Flow Diagram

<figure><img src="https://static.swimlanes.io/07f2f6c8a10d280c7281221d2778ea94.png" alt="Back-End for SPA Front-End (BFF) Flow Diagram"><figcaption><p><a href="https://swimlanes.io/u/LXVy4xM-o">Back-End for SPA Frontend (BFF) Flow Diagram</a></p></figcaption></figure>

{% hint style="info" %}
Note: the /`auth/login` and `/auth/callback` endpoints are to be developed by the relying party (RP) as these endpoints serve as the primary communication channel between RP SPA and RP Server.&#x20;
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.id.gov.sg/learn-the-basics/integration-patterns/backend-for-single-page-app-spa-frontend-bff.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
