How can I setup AWS cognito SSO with Strapi - reactjs

I want to accomplish SSO for Strapi Admin Panel. I've the following Use Case
I've a React Admin Panel Running on AWS using Cognito Authentincation
I've a Strapi Application running on Some Server
I've a Redirect button on React Admin Panel, that redirects to strapi login page
I want to use Cognito SSO for Strapi Admin panel so that my admin have only central credentials on AWS cognito and can use to login in both React Admin panel as well as Strapi Admin panel.
I've some confusions about strapi SSO. First one is,
Is strapi SSO available on free plan of strapi?
Even if your answer is either, How can It be done for Admin Panel?
Thanks in advance
I've tried to use this Strapi-Plugin but couldn't get what I want to acheive as it don't have any affect on strapi app.

Related

aws cognito google social login using react without hosted ui and without amplify

i am trying to integrate google social login to our react application without using hosted UI.
kindly help if some body having code using aws cognito+google social login+react
Thanks in advance
kindly share code link.
You can direct target the Amazon Cognito Authorize endpoint and set identity_provider=Google on the URL.
If you include an identity_provider or idp_identifier parameter in the URL, it silently redirects your user to the sign-in page for that identity provider (IdP).
The OAuth 2.0 REST API endpoints are fully documented under User pool OIDC and hosted UI API endpoints reference

How can I set up SSO with Azure AD and our back end strapi?

I am wondering if anyone has done this before,
I have an azure Active Directory, and I host the front end of our app in IIS. The back is controlled by pm2. How can I set up SSO with Azure AD and our back end strapi?
Thank you for any help
Strapi supports natively Microsoft SSO.
You must act on three fronts: Azure Portal, Strapi Admin, Frontend App
1 - AZURE Portal: (create application, configure, get params)
1.1 Create application, go to the App registrations site and register an app
1.2 Click New Registration
1.3 Fill the form as show in below ScreenShot
1.3.1 In "Supported account types" set Multitenant option (in strapi, single tenant is not supported by default, if you need to set single tenant you must create a custom provider, but multitenant is ok)
1.3.2 In the Redirect URI field, put "Web" and
/connect/microsoft/callback
(i.e. http://localhost:1337/connect/microsoft/callback or your strapi
production url https://mystrapiexample.com/connect/microsoft/callback)
1.3.3 Register and go to next page
1.4 Go to the "Authentication" page of your registered App (left menu) to enable the implicit grant flow (Access tokens)
1.5 Go to the "Certificate and secrets" page of your registered App (left menu) to create a "New client secret" and annotate the value, You will use it when you configure the provider on strapi.
1.6 Also note the "Application (client) ID" in the Overview page, You will use it when you configure the provider on strapi
2 - STRAPI ADMIN: (create application, configure, get params)
2.1 Go to "Roles and Permission" > Providers > Microsoft
2.2 Set Enable "ON" and your clientId and secret that you get in previous steps (1.5 and 1.6)
2.3 The redirect URI to your front-end app which gets and redirects the microsoft access_code (this step will be clearer later)
3 - FRONTEND APP:
Ready? At this point the flow begins, starts to jump to complete the authentication and obtain a strapi jwt to make the requests as an authenticated user.
3.1 Create a link in your frontend application to strapi microsoft sign-in
/connect/microsoft
(i.e. http://localhost:1337/connect/microsoft or your strapi
production url https://mystrapiexample.com/connect/microsoft)
3.2 Strapi redirects the user to microsoft authentication page, on success the user will be redirected on strapi with a microsoft access_code (this step is transparent for you)
3.3 Strapi redirects the access_code to the frontend url set in 2.3, which must redirect (with access_code) to strapi page auth
/auth/microsoft/callback
(i.e http://localhost:1337/auth/microsoft/callback or your strapi
production url https://mystrapiexample.com/auth/microsoft/callback ).....
3.4 At this point strapi creates its own JWT token which returns to the frontend application, which can store it (in localstorage, session storage...) to make requests to the strapi endpoints.
References
https://github.com/strapi/strapi-examples/blob/master/login-react/doc/microsoft_setup.md
https://learn.microsoft.com/en-us/azure/active-directory/develop/quickstart-register-app
https://learn.microsoft.com/en-us/azure/active-directory/develop/v2-oauth2-implicit-grant-flow
You can easily implement authentication using Azure AD in your strapi CRM web project.
Steps to follow:
Register an application in Azure AD.
Add target API, and grant consent to select permissions.
Choose your Microsoft authentication library ,recommended MSAL
Implement the MSAL library in your project. It is very simple to implement and code sample that can help you is available here.
Please let me know if you still have any issues.

How does the Azure AD B2C sign up policy integrate with an AngularJS Application?

I use AngularJS in frontend and web API in backend. I want for the project to redirect users to a custom login page. I added the sign up policy in Policy-User flow, but how can I integrate this policy to an AngularJS app, such that when the application runs it redirects to this page?
Did you search for samples? Here is one: https://github.com/Azure-Samples/active-directory-b2c-javascript-angular-spa

How to get the User pool token from Hosted UI on AWS Cognito

I am wanting to use the Hosted UI option in AWS Cognito so I don't have to build my own login page.
Most Cognito examples I see include custom built login pages using the Amplify-js framework. I'm trying to avoid this approach.
For my project, I have selected the Hosted UI option in AWS Cognito and upon successful login, I am redirected to my React application. However I'm unaware of how to retrieve the user pool token at this point. Looking in my chrome developer tab, I don't see any tokens under local storage, session storage, cookies, etc.
How can I find this token?
The token is returned as a query parameter id_token while redirecting to your application.
Refer to the docs for more details: using the hosted UI

Okta with React JS

I had a react native app to which i need to integrate OKTA, i have installed following packages for it
npm install #okta/okta-signin-widget#2.3.0 --save
I added the app in okta development site as OPENID Connect,Application Type :Single Page App (SPA). The problem is after assigning the app in okta site (https://dev-845745-admin.oktapreview.com) to the people, the assigned members are unable to see the app in Dashboard page.
You can configure which applications appear on the End-User Dashboard page via your Okta OpenID Connect Application.
The Login Initiated By setting specifies whether the app is initiated only in the background or whether either the app or Okta can initiate the login. If you select App Only, the app is started in the background without an Okta chiclet. If you select Either Okta or App, you can utilize an Okta chiclet.
Update Login Initiated By to Either Okta or App
Select the Display application icon to users checkbox under Appliation visibility
Once you have that setup, you can look at Okta's React Native OpenID Connect quickstart to see how you can integrate your React Native application with Okta.

Resources