FR (Authenticator): Support SAML providers

ErikCH commented 2 years ago

On which framework/platform would you like to see this feature implemented?

React, Angular, Vue

Which UI component is this feature-request for?

Authenticator

Please describe your feature-request in detail.

Our current documentation only shows Google, Facebook, Apple and Amazon as social providers. It would be nice to add in other external identity providers, bit SAML or OIDC, like with Microsoft Azure.

Please describe a solution you'd like.

Add a way for customers to add their own social providers and have them displayed for a user to login.

We love contributors! Is this something you'd be interested in working on?

[X] 👋 I may be able to implement this feature request.
[ ] ⚠️ This feature might incur a breaking change.

bestickley commented 2 years ago

I would also like to see this feature for React!

jmacmullin commented 1 year ago

Any update on this?

d-belic commented 1 year ago

Any updates?

reesscot commented 1 year ago

@bestickley @d-belic @jmacmullin, I'm trying to gather more requirements on this issue. Are you most interested in SAML or OIDC or both?

bestickley commented 1 year ago

@reesscot, I'm interested only in OIDC.

jmacmullin commented 1 year ago

Same, I'm only interested in OIDC at the moment.

jgilewski-siili commented 1 year ago

I'm interested in SAML

quarryman commented 1 year ago

SAML

evertson90 commented 1 year ago

I'm interested in SAML. Any updates on this?

L-U-C-K-Y commented 1 year ago

How were you thinking about the workflow and UX in general? Maybe a flexible approach, for example, routing based on the email domain could be a good option.

UX:

An email field is shown along all the currently support social providers (Google etc)
If a users enters an email, the backend looks up the email domain in the database, if it's supposed to be authenticated by a SAML provider. If the domain has no SAML provider associated, the current aws login flow can be used (password is shown now).
If the user is supposed to be authenticated with a SAML provider, then the backend returns the redirection links to the frontend and the frontend will redirect to the SAML provider.

Edit: I found some resources:

https://aws.amazon.com/blogs/security/use-the-hosted-ui-or-create-a-custom-ui-in-amazon-cognito/ https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-user-pools-managing-saml-idp-naming.html

In some example I see that a user has the option between a corporate email and a regular login. I think this would lead to many UX issues and support calls. A single field and then dynamic routing on the email would be better I'd assume.

ThomasAribart commented 11 months ago

Hi ! I also need this for a React project 🤗 @L-U-C-K-Y 's suggestion sounds perfect to me !

rwilliams3088 commented 8 months ago

I would like to see SAML support, please and thank you!

d-belic commented 8 months ago

@bestickley @d-belic @jmacmullin, I'm trying to gather more requirements on this issue. Are you most interested in SAML or OIDC or both?

SAML

renanwilliam commented 8 months ago

SAML, please!

Show a button with a link like in the hosted UI would be enough

MushyMiddle commented 2 months ago

My vote is SAML first, then OIDC.

I wish I hadn't wasted a half a day or so of my time trying to get SAML working using Authenticator. AWS Amplify docs state, "...However you can configure other Identity Providers that support SAML or OpenID Connect (OIDC)." (https://docs.amplify.aws/react/build-a-backend/auth/concepts/external-identity-providers/)

...and later on that page says, "If you are using the Authenticator component with Amplify, this feature works without any additional code. The guide below is for writing your own implementation." This is misleading, since Authenticator can't handle anything other than social provider IdPs.

It would be clearer if the SAML/OIDC sections were explicit about the limitations of the Authenticator component. That said, it does explain why the random code fragments for signInWithRedirect() are there in those sections.

renanwilliam commented 2 months ago

I have succeeded in making SAML work, but the hosted UI must be active.

I have made it in two steps: 1) Needs to set the property oauth in config (Auth.Cognito.loginWith.oauth), something like:

const openIdConfig = await getOpenIdConfiguration(`https://cognito-idp.${companyCognitoDetails?.UserPoolId.split('_')[0]}.amazonaws.com/${companyCognitoDetails?.UserPoolId}/.well-known/openid-configuration`);
const oauthParameters = {
      providers: [{
        custom: company.ssoProviderName as string,
      }],
      domain: (new URL(openIdConfig.authorization_endpoint)).host,
      scopes: [
        'aws.cognito.signin.user.admin',
        'email',
        'openid'
      ],
      redirectSignIn: [location.origin],
      redirectSignOut: [],
      responseType: 'code'
    };

2) In the components property in Authenticator, I have created a custom button in SignIn.Footer

import {authenticatorTextUtil} from "@aws-amplify/ui";
import {signInWithRedirect} from "aws-amplify/auth";
const {getForgotPasswordText, getOrText} = authenticatorTextUtil;

const DefaultFooter = () => {
  const {toForgotPassword} = useAuthenticator((context) => [
    context.toForgotPassword,
  ]);

  return (
    <View data-amplify-footer="">
      <Button onClick={toForgotPassword} size="small" variation="link">
        {getForgotPasswordText()}
      </Button>
    </View>
  );
};

const components: DefaultComponents = {
    SignIn: {
      Footer() {
        return (
          <Flex direction="column"
                className="federated-sign-in-container">
            <DefaultFooter/>
            {initialState?.samlActive ? (
              <>
                <Divider label={getOrText()} size="small"/>
                <Button
                  onClick={async () => {
                    await signInWithRedirect({
                      provider: {
                        custom: 'GoogleWorkspace'
                      }
                    });
                  }}
                  className="federated-sign-in-button"
                  gap="1rem"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    fill="#000"
                    version="1.1"
                    viewBox="0 0 32 32"
                    xmlSpace="preserve"
                    className="amplify-icon federated-sign-in-icon"
                  >
                    <path
                      d="M31 31.36H1v-.72h30v.72zm0-7H1A.36.36 0 01.64 24V1A.36.36 0 011 .64h30a.36.36 0 01.36.36v23a.36.36 0 01-.36.36zm-29.64-.72h29.28V1.36H1.36v22.28zm7.304-7.476c-.672 0-1.234-.128-1.687-.385s-.842-.6-1.169-1.029l.798-.644c.28.355.593.628.938.819.345.191.747.287 1.204.287.476 0 .847-.103 1.113-.308.266-.206.399-.495.399-.868 0-.28-.091-.52-.273-.721-.182-.201-.511-.338-.987-.414l-.574-.084a4.741 4.741 0 01-.924-.217c-.28-.098-.525-.229-.735-.392s-.374-.366-.49-.609a1.983 1.983 0 01-.175-.868c0-.354.065-.665.196-.931.13-.266.31-.488.539-.665s.501-.311.819-.399a3.769 3.769 0 011.022-.133c.588 0 1.08.103 1.477.308.396.206.744.49 1.043.854l-.742.672c-.159-.224-.392-.427-.7-.609-.308-.182-.695-.272-1.162-.272s-.819.1-1.057.3c-.238.201-.357.474-.357.819 0 .354.119.611.357.77.238.159.581.275 1.029.35l.56.084c.803.122 1.372.353 1.708.693.336.341.504.786.504 1.337 0 .7-.238 1.251-.714 1.652-.476.402-1.13.603-1.96.603zm6.733 0c-.672 0-1.234-.128-1.687-.385s-.842-.6-1.169-1.029l.798-.644c.28.355.593.628.938.819.345.191.747.287 1.204.287.476 0 .847-.103 1.113-.308.266-.206.399-.495.399-.868 0-.28-.091-.52-.273-.721-.182-.201-.511-.338-.987-.413l-.574-.084c-.336-.046-.644-.119-.924-.217s-.525-.229-.735-.392-.374-.366-.49-.609a1.983 1.983 0 01-.175-.868c0-.354.065-.665.196-.931.13-.266.31-.488.539-.665.229-.177.501-.311.819-.399a3.769 3.769 0 011.022-.133c.588 0 1.08.103 1.477.308.396.206.744.49 1.043.854l-.742.672c-.158-.224-.392-.427-.7-.609s-.695-.273-1.162-.273-.819.101-1.057.301c-.238.201-.357.474-.357.819 0 .354.119.611.357.77s.581.275 1.029.35l.56.084c.803.122 1.372.353 1.708.693.337.341.505.786.505 1.337 0 .7-.238 1.251-.715 1.652-.475.401-1.129.602-1.96.602zm7.378 0c-.485 0-.929-.089-1.33-.266s-.744-.432-1.028-.763a3.584 3.584 0 01-.665-1.19 4.778 4.778 0 01-.238-1.561c0-.569.079-1.087.238-1.554a3.56 3.56 0 01.665-1.197c.284-.332.627-.586 1.028-.763s.845-.266 1.33-.266.927.089 1.323.266.739.432 1.029.763c.289.331.513.73.672 1.197.158.467.238.985.238 1.554 0 .579-.08 1.099-.238 1.561a3.546 3.546 0 01-.672 1.19c-.29.331-.633.585-1.029.763a3.19 3.19 0 01-1.323.266zm0-.995c.606 0 1.102-.187 1.484-.56.383-.373.574-.942.574-1.708v-1.036c0-.765-.191-1.334-.574-1.708s-.878-.56-1.484-.56-1.102.187-1.483.56c-.383.374-.574.943-.574 1.708v1.036c0 .766.191 1.335.574 1.708.382.374.877.56 1.483.56z"></path>
                    <path fill="none" d="M0 0H32V32H0z"></path>
                  </svg>
                  <Text as="span" style={{color: "white !important"}}>Single Sign-On</Text>
                </Button>
              </>
            ) : undefined}
          </Flex>
        );
      }
    }
  };

The final result is:

aws-amplify / amplify-ui