Create IdP for SPA
You can use SiX IDaaS & IAM to create an "Identity Provider(IdP)" for your "Single Page Application(SPA)".
TIP
Identity Providers (IdP) created via the SiX IDaaS & IAM Console or APIs are designed to be associated with one or more OAuth2 clients.
By associating multiple OAuth2 clients (e.g., representing different Single Page Applications) with the same IdP, you enable seamless Single Sign-On (SSO) across those applications.
The "IdP/OAuth client" association natively supports OIDC and OAuth2 protocols out of the box.
Interaction flows
The following flow illustrates how one or more SPAs leverage SiX IDaaS & IAM to achieve Single Sign-On (SSO) for their users.
For detailed specifications on the OIDC protocol and the authorization_code grant flow, please refer to the OpenID Connect Basic Client Implementer's Guide.
Steps to create IdP for SPA
1. Create an Identity application
Login the SiX IDaaS & IAM console.
Navigating to menu: "Authentication->Create Identity Application(IdP)" to create the Identity application for the SPA.
2. Create one public OAuth client and associate it with Identity application
Login the SiX IDaaS & IAM console.
Navigating to menu: "Authorization->Create Oauth Client" to create the OAuth client and bind this client to the "Identity Application" create in the last step.
TIP
Please be noted, for the SPA, one public OAuth client should be used.
3. Install one OAuth client module into your SPA.
Depending on your SPA's framework (e.g., Vue, React, Angular), install a standard community OAuth2/OIDC client library such as oidc-client-ts or auth0-spa-js.
Configure your SPA by providing the following metadata from your SiX IDaaS & IAM IdP:
Client ID: The unique identifier for the public client created in Step 2.
Authorize Endpoint: The URL where the SPA redirects users for authentication.
Token Endpoint: The URL where the SPA exchanges the authorization code for tokens.
Redirect URI: The callback URL registered in your OAuth client configuration.
Once configured, initiate the Authorization Code Flow (preferably with PKCE for enhanced security). Upon successful login, the IdP will redirect back to your application with the necessary credentials to obtain identity and access tokens.
TIP
Please see the below IdP sample screenshot and the sample code for one VUE based SPA.
Advanced features
Customer branded IdP
The IdP created can be configured to match the customer branded styles e.g. using company logo, font, color etc.
Multiple authentication source supported
Except authentication/authorization and the UI provided by the platform tenancy, you can delegate the authentication to other sources e.g. other OIDC identity provider or SAML2 identity provider. Platform will be in charge of this authentication delegation.
More info please see:
IdP share to sub-orgs
You can share your Identity application to its sub-orgs then the sub-orgs can directly use this Identity application.
One typical case is: you can create one IdP at your enterprise level and share it all the departments, all the employees in your enterprise can use this same IdP.
Samples
SPA IdP sample 1 screenshot
SPA IdP sample 2 screenshot
SPA IdP sample code repo
TIP
If you can't access the repo, please contact us via the contact info on Contact Us