feat(@aws-amplify/auth): Easier Federation with OAuth

[undefobj]

Issue #, if available:
Fixes #2716

Description of changes:

• OAuth flows for Cognito Hosted UI endpoints
• Removed dependency on https://github.com/aws/amazon-cognito-auth-js
• Automatic STATE and PKCE support
• Better typings for Auth category
• More unit tests for federatedSignIn
• Comprehensive configuration checks for Federation scenarios
• Preserved backwards compatibility with Identity Pools only federation
• Updates React Native withOAuth HOC to use new API

By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.

[undefobj]

@powerful23 please review very carefully, including the code changes to withOAuth HOC in aws-amplify-react

[undefobj]

To test:

1. Create a new React app
2. yarn add aws-amplify@beta aws-amplify-react@beta -E
3. Have an aws-exports file that has:

• Just a User Pool which has Hosted UI enabled via new Amplify CLI
• User Pool with Hosted UI & Social Providers
• An Identity Pool and User Pool with Hosted UI federated together
• An Identity Pool only (legacy support, as per current documentation
  Example aws-exports file:

  const awsmobile =  {
    "aws_project_region": "us-east-1",
    "aws_cognito_identity_pool_id": "us-east-xxxxx",
    "aws_cognito_region": "us-east-1",
    "aws_user_pools_id": "us-east-xxxxxx",
    "aws_user_pools_web_client_id": "xxxxxxxx",
    Auth:  
    { 
      oauth: {
        domain: 'xxxxxxxxx-east-1.amazoncognito.com',
        redirectSignIn:  'http://localhost:3000/',
        redirectSignOut: 'http://localhost:3000/',
        scope : ['phone', 'profile', 'openid'], 
        responseType: 'code'
      },
    }
  };
  
  export default awsmobile;
  

4. Call federatedSignIn() in your app to start the login process and the flow will automatically be handled. You can also pass in a social provider to completely bypass the Hosted UI. For example a React app:

import Amplify, { Auth } from 'aws-amplify';
import awsmobile from './aws_exports';
Amplify.configure(awsmobile);


class App extends Component {

  render() {
    return (
      <div>
      <div className="App">
        <button onClick={() => window.open('http://localhost:3000', '_self')}>Local Host</button>
        <button onClick={() => Auth.federatedSignIn({provider: 'Facebook'})}>Open Facebook</button>
        <button onClick={() => Auth.federatedSignIn({provider: 'Google'})}>Open Google</button>
        <button onClick={() => Auth.federatedSignIn()}>Open Hosted UI</button>
        <button onClick={() => Auth.signOut()}>Sign Out</button>
      </div>
    );
  }
}

You should see JWT tokens and/or AWS credentials in local storage, depending on the combination of User Pools/Identity Pools you have in your config file. You can also use Auth.currentCredentials() or Auth.currentSession() after the redirect to validate you have the credentials.

[ddennis]

Scope exist multiple times inside oauth, is that on purpose?

 oauth: {
       ....
      scope: ['aws.cognito.signin.user.admin'],
      scope : ['phone', 'profile', 'openid','aws.cognito.signin.user.admin'], 
      ......
    },

[undefobj]

Scope exist multiple times inside oauth, is that on purpose?

No just a typo. Fixed.

[powerful23]

LGTM! 🚀

[jessedoyle]

@undefobj @powerful23 - I think this change introduced a few bugs in withOAuth for aws-amplify-react-native.

I'm seeing the following warning in our app after upgrading aws-amplify-react-native from 2.1.9 to 2.1.10 (where I believe this change was implemented):

Furthermore, it's looking like this change broke our custom provider login using withOAuth for a code grant type in React Native.

• In version 1.1.24 the flow works fine and we are able to authenticate with a custom provider.
• After updating only aws-amplify-react-native to 1.1.25, the login always fails with the following error: NotAuthorizedException: Token is not from a supported provider of this identity pool.

I'd be happy to provide additional details if necessary!

[powerful23]

@jessedoyle Hi, thanks for reporting! Can you open an issue in the repo and link it to this pr? We will track it there.

[jessedoyle]

@powerful23 - Will do, thanks!

[rally25rs]

If anyone familiar with how this PR works could look at https://github.com/aws-amplify/amplify-js/discussions/7971 and tell me what I'm doing wrong, I would greatly appreciate any help 🙏

[github-actions]

This pull request has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.