The SMAL Configuration steps are missing e.g SignIn with Okta or AZURE plus how to call the hosted UI

**Describe the content issue**:
A clear and concise description of what the content issue is. Is there content missing or is there incorrect content?

The SMAL Configuration steps are missing e.g SignIn with Okta or AZURE plus how to call the hosted UI

**URL page where content issue is**:
https://docs.amplify.aws/react/build-a-backend/auth/

Here is the suggestion or the walk through

Step 0: Ensure you have created a custom SAML provider in the AWS Cognito pool for this app. The name you give to this provider is used in the front end code in step 3 (in my case "AzureSSO")

Step 1: Update amplify auth to use OAuth providers and specify domain and reply URLs in process. In staging I use:

      

      amplify update auth

What do you want to do? Apply default configuration with Social Provider (Federation)

What domain name prefix do you want to use? abc-123 –this will create the Cognito Hosted UI and this wil be the domain component of the URL. It will be required in your Azure Enterprise App as the Reply URL. It would generate the url as something like https://abc-123-staging.auth.ap-southeast-2.amazoncognito.com/saml2/idpresponse. NOTE: Notice that the environment is appended to the domain name, ie, I entered "abc-123" as the domain but "abc-123-staging" is what forms the URI

Enter your redirect signin URI: http://localhost:3006/ --this is your local dev url you are using that the auth process will redirect to on successful auth

? Do you want to add another redirect signin URI No

Enter your redirect signout URI: http://localhost:3006/

? Do you want to add another redirect signout URI No

Select the identity providers you want to configure for your user pool:

None (dont choose any)

amplify push

Step 2: In the AWS console, under Cognito, find the cognito pool your app is using. Go to the App integration tab. In the section "App client list" at bottom of page you should have some auto generated apps from amplify. In my case, click on {something}_clientWeb (though you can determine the exact App ID in question in local file src\aws-exports.js in the aws_user_pools_web_client_id field). On the "Hosted UI" section, click Edit. In the "Identity providers" section, click the dropdown and you should be able to add in the custom SAML provider from step0 (Named "AzureSSO" in my case)

Step 3: Ensure you have created the Azure Enterprise App in azure and then the SSO SAML config should look like

Identifier (Entity ID): urn:amazon:cognito:sp:ap-southeast-2_NlYclXXyZ —can be determined from following this template string but replace with your specific details found on the Cognito details page for the pool.

Reply URL (Assertion Consumer Service URL): Should be like https://{abc-123}-{environment}.auth.ap-southeast-2.amazoncognito.com/saml2/idpresponse

abc-123 in the string above is the domain prefix from step 1. The environment part of the string is your environment name (eg dev/staging/production etc, whatever your environment name is for your amplify app). Also obviously the string above uses ap-southeast-2 as this is my region that my cognito pool resides in. Change as per your region.

      

Step 4: Update the React Front End Code:

I'm using aws-amplify v6 - which is different to aws-amplify v5, notably the JS imports are different. Though should still work with v5

To add a custom SAML provider link in the Authenticator form:

import { signInWithRedirect } from "aws-amplify/auth";
NOTE: v6 imports from "aws-amplify/auth" not "aws-amplify".
To use with v5, im guessing use: import { Auth} from 'aws-amplify'; and then Auth.federatedSignIn() instead of signInWithRedirect(). Would recommend just using v6 instead.

Then, in the Authenticator component (imported from "@aws-amplify/ui-react") in the components prop, set the SignIn to include a button to sign in with our custom SAML provider (named "AzureSSO" in my case)

Sign in using your Azure account


{
signInWithRedirect({ provider: { custom: "AzureSSO" } });
}}
>
Sign in using Azure SSO

Or sign in with a local user account


);
},
},
}}
>

IMPORTANT:
The above example uses environment STAGING
Now to also implement in environment PRODUCTION....

Your production environment redirect URL will no doubt be different (i.e., not http://localhost:3000 but https://my-deployed-app.contoso.com)

Create a new Azure Enterprise App that uses this new environments details (complete the above steps for the production environment, i.e., have an Azure Enterprise App that uses your production Hosted Cognito endpoint as the reply URL, uses the production app URN in the identifier (entity id)).

run "Amplify push" to ensure your new auth settings is indeed also pushed to your prod environment

Now, need to update the redirect URLs to point to your production URL:

amplify update auth
Using service: Cognito, provided by: awscloudformation
What do you want to do? Add/Edit signin and signout redirect URIs
Which redirect signin URIs do you want to edit? http://localhost:3006/
? Update http://localhost:3006/ https://my-production-site.contoso.com/
Do you want to add redirect signin URIs? No
Which redirect signout URIs do you want to edit? http://localhost:3006/
? Update http://localhost:3006/ https://my-production-site.contoso.com/
Do you want to add redirect signout URIs? No

From example above, im changing the redirect from http://localhost:3006/ to https://my-production-site.contoso.com/

Now push changes to backend, and publish to prod
amplify push
amplify publish