Problem Statement:
We are working on a requirement which has 2 applications :
a. Login Application ( login-portal ) : Login & Registration Screen in React.
b. Main Application ( main-application ) : Main application in Angular.
We need integrate OKTA in both applications so that when successfully authenticated from Login Application ( login-portal ) user would be redirected to Main application (main-application)
Notes
-
We plan to create only one application in OKTA ( OIDC - SPA - PKCE ) and use the ClientID in both React & Angular applications.
-
We plan to use Okta Sign In Widget on both React and Angular applications.
-
We need to use Custom Login & Registration screens, so working with Okta Sign In Widget Embedded approach.
Our Understanding on using OKTA
-
Integrate OKTA into both React & Angular applications
-
For React Login Application, use “showSignInAndRedirect” method to render the custom Login Screen and once successfully logged in, redirect to Angular application (main-application)
Query: Do we need a login/callback route in this react app? Will “Sign-in redirect URIs” in Okta Admin console redirect the user to Angular app (main-application) ?
- If User directly accesses Angular application (main-application) without authenticating, then the OKTA AuthGuard should redirect the user to React Login application (login-portal).
Query : Will the ‘Initiate login URI’ in Okta Admin console help in redirecting the user to React Login app( login-portal ) ? How to redirect the user to React Login application (login-portal) if not authenticated in main angular application ( main-application )
With the above use-cases, are we moving in the right direction? Kindly let us know the best approach to satisfy the above requirement.
Thanks!