Amplify-js: Q: Cognito Auth vs. Cognito Identity? Difference?

[wzup]

What's the difference?
Why two?
Why no docs about difference?
What to use for what use cases?

https://github.com/aws/amazon-cognito-auth-js
https://github.com/aws/aws-amplify/tree/master/packages/amazon-cognito-identity-js

[powerful23]

amazon-cognito-identity-js mainly helps users to develop their own authentication process with the Cognito User Pool.

amazon-cognito-auth-js mainly focuses on the Cognito Hosted UI feature to simplify the process of authentication.

[mlabieniec]

@wzup Amplify Auth category provides 1 method to utilize both of these approaches. The ultimate goal is for Amplify to be the primary client use case for interacting with these services, with the ability to drill down and use these underlying SDKs if you have the need and/or complex use cases. The two use cases @powerful23 mentioned:

• working with user pools is available out-of-the-box and uses the amazon-cognito-identity-js sdk under the covers to interact with the amazon cognito service
• the auth sdk is directly related to using the Cognito Hosted UI which utilizes OAuth2 and allows you to authenticate off of your site. The result returns, and the underlying auth sdk handles retrieving tokens for you (refresh token if using code auth).

Basically, guidence is if you are building a frontend application using auth, use Amplify lib if there are missing features please post a feature request here.

[wzup]

@mlabieniec

Amplify doesn't have very important method - check if a username (email) already exists in Codnito User Pool.
Here is my issue on that
https://github.com/aws/aws-amplify/issues/1067#issuecomment-400565311

[mlabieniec]

@wzup thanks we are working on getting full feature coverage on the library w/the SDKs and will get this one moved up.

[syang]

@powerful23 does Amplify client currently support a Cognito User Pool sign-up / sign-in page, for Facebook and Google IdP, https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-user-pools-social-idp.html

I wanted to build a sign-up page like this Custom hosted UI

[powerful23]

@syang you can add your customized UI in your app and use the Cognito Hosted UI to login from Google/Facebook: https://aws-amplify.github.io/amplify-js/media/authentication_guide#launching-the-hosted-ui

[syang]

@powerful23 I have not figured out a way to make the facebook/google login button work in snippet for React App

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

class MyApp extends React.Component {
// ...
render() {
return(
Sign in with AWS

)
}
}

export default withOAuth(MyApp);

How should one incorporate the "Launching the Hosted UI" (your link to demonstrate google/facebook social login) into the above React code snippet?

[powerful23]

@syang if you only want to use the facebook/google sign in, you need to write your own button component which will take you to that url in https://aws-amplify.github.io/amplify-js/media/authentication_guide#launching-the-hosted-ui

[askaliuk]

@powerful23 @mlabieniec
Thank you for your answers.

1. I found that the purpose of amazon-cognito-auth-js is confusing.
   It claims Instead of implementing a UI for sign-up and sign-in, this SDK provides the UI via a hosted page., but after examination of it's source code, I found it never opens hosted web UI ( https://your_domain/login?response_type=code&client_id=your_app_client_id&redirect_uri=your_callback_url). It works with oauth2/authorize and oauth2/token APIs instead. Basically, it provides convenient (but incompatible with Amplify way) to work with social auth providers like Facebook. It offers features like: building cognito API URLs; parsing web response and session management/token refreshing.

2. Considering that Amplify lib is a primary choice, could you please clarify how to work with social providers (e.g. Facebook) using Amplify library without hosted web UI. Basically, my goal is to provide users both email/password and Facebook/Google flows (similar to hosted UI implementation, but using my own custom one). Let's say I implemented my own "Sign in with Facebook" button. What are my next steps with Amplify? _amazon-cognito-auth-js_ provides getSession API, which does exactly what I need (constructs the URL to oauth2/authorize API; opens Facebook login page and provides parseCognitoWebResponse API to a parse a result). I didn't find similar functionality in Amplify, but I can't use both libraries together.

Thank you in advance for your clarifications.

[powerful23]

@askaliuk Hi, for now you can only use the Cognito Hosted UI to sign in with facebook into your Cognito User Pool. Once you get redirect back from Facebook, the url which contains the tokens will automatically be parsed by Amplify as long as you called Auth.configure() with your Cognito Hosted UI related setting. Then you can listen on the hub event to tell whether the parsing url succeeds or not.

Example:

import {Auth, Hub} from 'aws-amplify';
// your redirected page
Auth.configure({
    awsCognito: {
     }
});

class your_component {
     constructor() {
            this.onHubCapsule = this.onHubCapsule.bind(this);
            Hub.listen('auth', this);
     }
     onHubCapsule(capsule) {
             const { channel, payload, source } = capsule;
             if (channel === 'auth' ) {
                     if (payload.event === 'signIn') //user signed in
                     if (payload.event === 'signIn_failure') //user failed to signed in
             }
        }
     }
}

[OndeVai]

I'm also super confused by the "amazon-cognito-auth-js" library. The documentation is very sparse and the sample doesn't shed any light. It would to make at least some mention of Amplify in this repo's readme.

@powerful23 For hosted UI, using this pattern above, how you suggest securing certain javascript pages/routes/components if the user deep links to them? For example, say there's a route "/secured" that users can only access when authenticated. I want to check if the user exists and if not, redirect to back to the hosted UI to log in.

[powerful23]

@OndeVai can you try something like:

class secured_component {
     componentDidMount() {
            Auth.currentAuthenticatedUser().then(user => {
                  // user is logged in
            }).catch(e => {
                  // user is not logged in
                  // redirect back to the Hosted UI
            });
     }
}

[OndeVai]

@powerful23 Thanks for the quick response, but it looks like Auth.currentAuthenticatedUser() always fails when hitting the auth callback url from the hosted UI page the first time. It seems like the session isn't quite populated yet. I think I can work something out between using both the Hub on the callback url and Auth.currentAuthenticatedUser() and then user Auth.currentAuthenticatedUser() to check the other routes. But, it seems like Auth.currentAuthenticatedUser() should succeed after coming back and I should not have to mess around with the Hub. Think this is worthy of a separate bug report?

[powerful23]

@OndeVai In fact we have noticed this issue. Because when you get redirected back from the hosed UI, the url has't been parsed yet so at that moment Auth.currentAuthenticatedUser() would return no user. You need to listen on hub events which will be emitted when parsing url finishes and at that time you can tell whether the user signs in or not. We are working on docs to make this part more clear.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[sammartinez]

Here is our documentation on Authentication within Amplify. Resolving this as the documentation is present today