How to set up Social Login (SSO) for Azure

[sergiochavezlazo96]

Hi!

I am new using Amplify and I am having problems setting Azure as one social provider.

I already set everything in AWS Cognito (using an OIDC provider and calling the identity provider 'Microsoft') and I am able to see and use the button in the Hosted UI. Now I am trying to include that button in my React App.

I am currently wrapping my App component using the Authenticator like this

function App() {
  return (
    <Authenticator
      className="text-center bg-component_bg bg-cover"
      formFields={formFields}
      components={components}
      services={{
        async validateCustomSignUp(formData) {
          if (!formData.acknowledgement) {
            return {
              acknowledgement: "You must agree to the Terms and Conditions.",
            };
          }
        },
      }}
    >
      {({ signOut }) => {
        return (
          <AuthProvider signOut={signOut}>
            <AuthStateManager signOut={signOut} />
          </AuthProvider>
        );
      }}
    </Authenticator>
  );
}

Also I am setting the aws config file in a way that includes

aws_cognito_social_providers: ["google"]

After reading the documentation I am understanding that the Authenticator only supports Google, Apple, Github and Facebook, so I get that adding 'microsoft' does not add the button automatically (I already tried this)

So my first question is: Is it possible to add the button while still using Authenticator?

Considering the potential scenario in which this is not possible, I have tried the following:

Amplify.configure(awsconfig);

function App({signOut, user}) {
  return (
    <>
          <AuthProvider signOut={signOut}>
            <AuthStateManager signOut={signOut} />
          </AuthProvider>
    </>
  );
}

export default withAuthenticator(App);

From the documentation I get that this is another way to set up Amplify. However, is not clear how can I customise this further to include the button that I need to allow Azure Sign On. Is not clear how to integrate that code with what you suggest later with this code:

function App() {
  const [user, setUser] = useState(null);
  const [error, setError] = useState(null);
  const [customState, setCustomState] = useState(null);

  useEffect(() => {
    const unsubscribe = Hub.listen('auth', ({ payload }) => {
      switch (payload.event) {
        case 'signInWithRedirect':
          getUser();
          break;
        case 'signInWithRedirect_failure':
          setError('An error has occurred during the Oauth flow.');
          break;
        case 'customOAuthState':
          setCustomState(payload.data);
          break;
      }
    });

    getUser();

    return unsubscribe;
  }, []);

  const getUser = async () => {
    try {
      const currentUser = await getCurrentUser();
      setUser(currentUser);
    } catch (error) {
      console.error(error);
      console.log('Not signed in');
    }
  };

  return (
    <div className="App">
      <button onClick={() => signInWithRedirect()}>Open Hosted UI</button>
      <button onClick={() => signInWithRedirect({ provider: 'Facebook' })}>
        Open Facebook
      </button>
      <button onClick={() => signInWithRedirect({ provider: 'Google' })}>
        Open Google
      </button>
      <button onClick={() => signInWithRedirect({ provider: 'Amazon' })}>
        Open Amazon
      </button>
      <button onClick={() => signInWithRedirect({ provider: 'Apple' })}>
        Open Apple
      </button>
      <button onClick={() => signOut()}>Sign Out</button>
      <div>{user?.username}</div>
    </div>
  );
}

Why are we not wrapping the app with withAuthenticator anymore?

[jordanvn]

Hello @sergiochavezlazo96 👋 Thanks for opening this issue. The Authenticator does not currently directly support using Azure as a social provider. This is a feature that has been brought up before, here: #1152. Note that one user says they have found a way to make SAML work for them.

We are planning to implement this and you can follow the feature request linked for further updates. For the time being, I'm going to mark this issue as a duplicate feature request.