Amplify-js: Using Amplify Auth with SAML

[alexlhanson]

Using Amplify Auth with SAML

Summary

I have added Amplify Auth to my project with Cognito User Pool. Auth works with Cognito fine. After adding a SAML identity provider to Cognito I expect get redirected to my identity provider but I just get the same amplify login screen.

How can I configure amplify to redirect to the IP rather than the default login?

Expectation

Expecting to be directed to SAML ID provider when logging in to the App, and then being logged in and redirected back to my app.

[powerful23]

@alexlhanson are you federating SAML with the Cognito User Pool? If so, you need to use the Cognito Hosted UI to do it. https://aws-amplify.github.io/docs/js/authentication#using-amazon-cognito-hosted-ui

[logabstract]

Hello, It would be posible in the case I have Cognito User Pool and SAML federation, create a Login component in my React app and create a button to redirect to the authorize endpoint of SAML?

https://.auth.us-east-1.amazoncognito.com/authorize?idp_identifier=cognito.com&response_type=token&client_id=&redirect_uri=

And once I get redirected to my app, Amplify will work as expected or do you recommend always Hosted UI for this case?

[powerful23]

@logabstract yes you can create a button to redirect to the authorize endpoint. When you are redirected back from SAML, the url should contain the id token and access token. You need to make your code flow work like this: https://aws-amplify.github.io/docs/js/authentication#make-it-work-in-your-app to ensure you can integrate your app with Amplify.

[alexlhanson]

@powerful23, yes I am trying to run SAML with OKTA to my Cognito Pool. The hostedUI page was a bit confusing because it just mentions OAuth config, but using the same info from configuring and launching sections, it now brings up the OKTA button for login. Now just fixing Cognito issues. Thanks for the help!

[Gtosta96]

@alexlhanson could you share what you've done to integrate amplify with Okta using SAML?

Thanks.

[cyrfer]

You need to make your code flow work like this

@powerful23 I think your link is broken. What section are you trying to link to?

[powerful23]

@cyrfer please check the doc: https://aws-amplify.github.io/docs/js/authentication#oauth-and-federation-overview

[shicholas]

@Gtosta96 / @alexlhanson, from what I gathered, OAuth is different than SAML. I have successfully set up Okta SAML with my Cognito User Pool, but there is no HOC exposed from aws-amplify-react that works like withOAuth that is in the docs referred to by @powerful23.

You can, however, reconfigure Okta to be an OpenID provider via https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-user-pools-oidc-idp.html and then use the HOC exported by Amplify. With SAML, AFAIK you'll need to write custom code to both initiate the login request and handle the callback request with the access token as a query param.

Edit: Looks like you can use the hosted UI version too, see #1440

[shicholas]

I got Okta with SAML working after following these set up instructions and using this as a login component.

import { Button, Container, React, Section } from '@1337lawyers/design';

export const LoginScreen = () => {
  const openSaml = () => {
    window.location.assign(
      'https://<YOUR_DOMAIN>.auth.<YOUR_REGION>.amazoncognito.com/login?response_type=token&client_id=<YOUR_COGNITO_CLIEND_ID>&redirect_uri=<YOUR_REDIRECT_URI>'
    );
  };
  return (
    <Section>
      <Container>
        <Button onClick={openSaml}>Log in with Okta</Button>
      </Container>
    </Section>
  );
};

Once you replace the above with the same values as referenced in the documentation, you will send the user to the Cognito Auth UI. Once the user is redirected back to your website Amplify will trigger a Hub message that the user has successfully logged in. You can then use the Hub message in a React Context/ Redux to then process the authentication logic.

Hope this helps!

[ezagala]

@shicholas do you happen to have an example of how you configured Amplify Auth to generate such a message, and how to access it? After the redirect, I see an access token in the URL (as expected), though I'm at a loss as to how to decode it/make use of the information there.

[Gtosta96]

Hey guys,

I've achieved what I wanted doing something similar to the following:
Basically, there are some adjustments I omitted it in order to simplify the idea and focus on what matters - aws x cognito/okta integration.

That way, aws-amplify-react handles everything for =)

// Values retrieved from environment variables

const auth = {
  region: awsRegion,
  userPoolId: awsCognitoUserPoolId,
  userPoolWebClientId: awsCognitoUserPoolWebClientId,
  identityPoolId: awsCognitoIdentityPoolId,
  oauth: {
    domain: awsCognitoOktaDomain,
    scope: ['phone', 'email', 'profile', 'openid'],
    redirectSignIn: awsCognitoOktaRedirectSignIn,
    redirectSignOut: awsCognitoOktaRedirectSignOut,
    responseType: 'code',
  },
};

Amplify.configure({ Auth: auth });

import { SignIn, withOAuth } from 'aws-amplify-react';

class SamlLoginContainer extends SignIn {
  interval = null;

  componentDidMount() {
    if (shouldRedirect()) {
        this.props.OAuthSignIn();
    }
  }

  shouldRedirect = () => {
      return this.props.authState === 'signIn' || this.props.authState === 'loading';
  }

  render() {
    return this.shouldRedirect() && 'redirecting...';
  }
}

export default withOAuth(SamlLoginContainer);