Single-page-applikationer kan ikke sikkert gemme en client secret i browseren. Brug autorisationskodeflowet med PKCE, eller brug den officielle @intastellar/signin-sdk-react-pakke hvis du målretter React og din klient er sat op til den — SDK’en bruger popup og verifikation i stedet for at du manuelt kobler authorize + token-POST.

Til konkrete React- og vanilla-mønstre (kun pladsholdere), se Intastellar Sign-In — React og JavaScript.

Flow-resumé (manuel kode + PKCE)

1. Generer code_verifier (høj-entropi tilfældig streng) og udled code_challenge (S256).
2. Gem code_verifier hvor du kan læse den ved callback — f.eks. sessionStorage for fanen, eller en krypteret cookie via en lille BFF.
3. Omdiriger til AUTHORIZATION_ENDPOINT med code_challenge / code_challenge_method=S256.
4. Ved callback, send code + code_verifier til din backend (anbefalet) eller til token-endepunktet hvis dit produkt tillader offentlige klienter uden secret (bekræft i dit konsol).

Foretræk en backend-for-frontend (BFF)

Selv i en SPA er token-udveksling og refresh sikrere på et same-origin API:

• Browseren modtager kun en uigennemsigtig session-cookie fra dit API.
• Refresh tokens rører aldrig localStorage.
• CORS og CSRF er lettere at styre på dit domæne.

Hvis du absolut skal håndtere tokens helt i browseren, minimer levetid, undgå localStorage til refresh tokens, og betragt XSS som fuldt session-kompromis.

CORS og iframes

Indlejr ikke Intastellar login-UI i en skjult iframe medmindre produktet udtrykkeligt understøtter stille eller indlejrede flows. Foretræk fuldside-omdirigering til log ind og log ud.

Ofte stillede spørgsmål

Er React-popup det samme som PKCE-omdirigering?

Nej. SDK-popup-stien er en anden integrationsstil. Denne side handler om omdirigering + PKCE når du bygger flowet selv.

«CORS-fejl» ved kald til token-endepunktet fra JavaScript

Ofte forventet — mange token-endepunkter er ikke beregnet til at kaldes direkte fra browseren. Brug din backend eller en BFF.

Næste

Server-side (fortrolige) klienter hvis du også kører en traditionel backend med en secret.