# FranceConnect Mobile Login Flow UI in React Native > By Lawrence Arya, Founder & CEO of VP0. Published 2026-06-07. 5 min read. > Source: https://vp0.com/blogs/franceconnect-mobile-login-flow-ui-react-native One state-operated button, a strict design charter, and a flow where your app's job is the handoff, not the credentials. **TL;DR.** A FranceConnect login flow in React Native is a standard OpenID Connect redirect with hard guardrails: integration is restricted to approved service providers, the authorization always opens in ASWebAuthenticationSession rather than an embedded WebView so credentials stay on the state's pages, the official button renders per the design charter without restyling, and the federation's own picker chooses the identity provider. The app owns the handoff moment, the return deep link, and a plain display of the verified claims received, under strict data minimization. Free VP0 designs cover the sign-in and verified-profile screens around the flow. ## What is FranceConnect, and who is allowed to integrate it? France's national identity federation: one button that lets people prove who they are using an account they already hold (taxes, health insurance, La Poste), operated by the French state and used by more than 37 million people across over 1,000 online services. [FranceConnect](https://www.franceconnect.gouv.fr/) federates those identity providers behind a single OpenID Connect flow, with [FranceConnect+](https://fr.wikipedia.org/wiki/FranceConnect) as the higher-assurance tier for sensitive operations. The eligibility line comes before any UI work: **integration is restricted to approved service providers**, public administrations and certain regulated private services, vetted and registered with the operator. A random consumer app cannot add FranceConnect the way it adds Google sign-in, and a screen that imitates the button without being an approved provider is not a growth hack, it is phishing-shaped. Build this flow when you are (or are building for) an eligible service; study it otherwise, because the patterns transfer to every national-ID login. ## How does the mobile flow actually run? As a standard [OpenID Connect](https://openid.net/developers/how-connect-works/) redirect dance, with one iron rule about where it happens: - The app shows the FranceConnect button (per the official design kit, more below). - Tapping it opens the FranceConnect authorization page in [ASWebAuthenticationSession](https://developer.apple.com/documentation/authenticationservices/aswebauthenticationsession) (or its React Native wrappers), never an embedded WebView. The system browser sheet shares the user's existing sessions, shows the real domain, and keeps credentials out of your app's reach, which is exactly the point: the user types their tax-account password into the state's page, not into yours. - FranceConnect renders its own identity-provider picker. The app does not rebuild that screen; the chooser belongs to the federation, and lookalike pickers are where clones go wrong. - After authentication, the redirect returns through your registered scheme or universal link, the backend exchanges the code for tokens, and the app receives the identity claims it is entitled to: typically given name, family name, birth date, and a stable pairwise identifier. The app's actual UI surface is small and worth getting exactly right: the button, the handoff moment ("you'll continue on franceconnect.gouv.fr"), the return state, and the signed-in identity summary. ## What does the button demand? Compliance, not creativity. FranceConnect ships an official button with a design charter: fixed artwork, approved sizes, light and dark variants, and rules about what may sit next to it. The temptation to restyle it into your design system is the one to resist, since the button's entire value is instant recognition of a state-operated flow; a custom-styled version reads as suspicious to exactly the users who matter. The same render-the-official-asset discipline applies to [the Google sign-in button](/blogs/google-sign-in-button-swiftui-code/), and the two failures rhyme: brand-kit buttons are contracts, not suggestions. Two presentation rules complete the surface. Place the button as a peer among your sign-in options rather than burying it, and never pre-select it or auto-launch the redirect, because the user's choice of identity route is the consent moment. And the post-login screen should show what was received, plainly: "Signed in via FranceConnect: Marie Dupont, born 1989", with nothing implied beyond the claims actually granted. ## What should the app do with the identity? As little as possible, visibly. National-ID logins deliver verified attributes, and the data-minimization posture is the product: request the minimal scopes the service genuinely needs, display what arrived, store the pairwise identifier rather than raw attributes where the design allows, and keep the verified identity clearly separated from anything self-declared in the profile. The genre's standing rule, the same one that governs [the Dutch KvK autofill flow](/blogs/dutch-kvk-business-registry-lookup-ui/), is that government-verified data is borrowed, not owned: label its source, honor its scope, and never quietly enrich a marketing profile with it. Error states deserve native care because the federation has real ones: the user abandons mid-redirect (render a calm "sign-in not completed", never an error tone), the chosen provider is temporarily down (FranceConnect surfaces this; the app passes it through honestly), or the account lacks the assurance level a FranceConnect+ operation requires (explain the step-up, link the official help). The session sheet getting dismissed is a normal user action on this flow, and treating it as a failure is the most common polish miss. The screens around the flow, sign-in option lists, handoff states, verified-profile summaries, exist as free [VP0](https://vp0.com) designs an agent generates from, which keeps the custom work where it belongs: in the eligibility paperwork and the backend token exchange, not the button layout. The open-banking sibling, a legally-defined consent that hands off to the bank's own SCA, is built in [the PSD2 consent screen](/blogs/psd2-open-banking-consent-screen-ui-react-native/). ## Key takeaways: FranceConnect in a mobile app - **Eligibility precedes implementation**: approved service providers only; an unapproved lookalike is phishing-shaped. - **System browser session, never an embedded WebView**: credentials belong to the state's page, with the real domain visible. - **The official button is a contract**: fixed artwork, no restyling, placed as a peer option and never auto-launched. - **The federation owns the picker**; the app owns the handoff, return, and a plain display of received claims. - **Minimize and label the data**: minimal scopes, visible provenance, verified attributes never silently reused. ## Frequently asked questions **How do I build a FranceConnect login flow in React Native?** Render the official button per the design charter, launch the OpenID Connect authorization in ASWebAuthenticationSession (never a WebView), let FranceConnect's own pages handle provider choice and credentials, then receive the redirect and exchange the code server-side. Free VP0 designs cover the sign-in and verified-profile screens around the flow. **Can any app integrate FranceConnect?** No. Integration is limited to approved service providers, public administrations and certain regulated private services registered with the operator. Apps outside that scope should not present the button; an unapproved imitation of a national-ID flow reads as phishing. **Why not open FranceConnect in an in-app WebView?** Because users would type government-account credentials into a surface your app controls, with no trustworthy address bar, and embedded webviews break session sharing. The system authentication session shows the real domain and keeps credentials with the state's pages. **What user data does FranceConnect return?** The claims your registered scopes grant, typically verified name, birth data, and a stable pairwise identifier. Request the minimum the service needs, show users exactly what arrived, and keep verified attributes labeled and separate from self-declared profile data. **What is FranceConnect+ and when is it required?** The higher-assurance tier, backed by stronger identity proofing, required for sensitive operations. If a user's account cannot satisfy it, the app should explain the step-up plainly and link the official guidance rather than dead-ending. ## Frequently asked questions ### How do I build a FranceConnect mobile login flow in React Native? Render the official FranceConnect button per its design charter, open the OpenID Connect authorization in ASWebAuthenticationSession, let the federation's pages handle provider selection and credentials, then handle the redirect return and exchange the code server-side for the granted identity claims. Free VP0 designs supply the surrounding sign-in and profile screens. ### Can any app integrate FranceConnect? No: only approved service providers, public administrations and certain regulated private services registered with the operator. An app outside that scope must not present the button, since an unapproved national-ID lookalike is phishing-shaped by construction. ### Why must FranceConnect open in the system browser instead of a WebView? Credentials for government-linked accounts belong on the state's own pages with a visible real domain. An embedded WebView puts them inside a surface the app controls, breaks existing session sharing, and contradicts the flow's security model. ### What data does a FranceConnect login return to the app? The claims granted by your registered scopes, typically verified name and birth data plus a stable pairwise identifier. Request minimal scopes, display exactly what arrived, and keep verified attributes labeled and separated from self-declared data. ### Can I restyle the FranceConnect button to match my app? No: the button ships with fixed artwork and usage rules, and its value is instant recognition of a state-operated flow. Restyled versions undermine that recognition and typically violate the design charter, the same contract logic as other identity-brand buttons. --- *Published on the [VP0 Journal](https://vp0.com/blogs). Free to read, index and cite with attribution.*