Amplify-js: Cognito Hosted UI and Hub module clarification

[karlmosenbacher]

Which Category is your question related to?
The Hub module

What AWS Services are you utilizing?
AWS Cognito

Provide additional details e.g. code snippets
I cant think that I am the only one who has struggling around trying to implement the Amazon Cognito Hosted UI in an react application with this library and especially with the withOAuth HOC from aws-amplify-react. I also think that Im not the only one searching the internet for a guide or an example that works.

So, heres the thing, as said above am I trying to implement the HostedUI with aws-amplify-react and by keeping track of the authenticated state (if the user is signed in or not) I am using the Hub module and the onHubCapsule function.

From the beginning, the implementation looked like this:
````
import { Auth, Hub } from 'aws-amplify';
import { withOAuth } from 'aws-amplify-react';
import { AuthorizedRoutes, PublicRoutes } from '../Routes;

class App extends React.Component {
constructor(props) {
super(props);
this.state = {
isSignedIn: false,
cognitoUser: {}
};
Hub.listen('auth', this, 'authlistener');
}

onHubCapsule(capsule) {
const { channel, payload } = capsule;
if (channel === 'auth') {
const event = payload.event;

  if (event === 'signIn') {
    this.setState({isSignedIn: true});
  }

  if (event === 'cognitoHostedUI') {
   this.setState({cognitoUser: payload.data})
  }

  if (event === 'signOut') {
    this.setState({ isSignedIn: false, cognitoUser: {} });
  }
}

}

render() {
const { isSignedIn } = this.state;
return (

signIn={this.props.OAuthSignIn}
/>
{
isSignedIn ?

:

}

);
}
}

export const AppWithAuth = withOAuth(App);
````
But pretty soon I noticed that the Hub module does not listen for auth events if no auth event have happen. It would be perfect if the Hub module could dispatch a decideAuth event or something similar on app launch. But instead, I added a check if a current authenticated user existed like this:

````
import { Auth, Hub } from 'aws-amplify';
import { withOAuth } from 'aws-amplify-react';
import { AuthorizedRoutes, PublicRoutes } from '../Routes;

class App extends React.Component {
constructor(props) {
super(props);
this.state = {
isSignedIn: false,
cognitoUser: {}
};
Hub.listen('auth', this, 'authlistener');
}

async componentDidMount() {
try {
const userResponse = await Auth.currentAuthenticatedUser();
Hub.dispatch('auth', { event: 'signIn', user: userResponse }, 'Auth');
} catch (error) {
Hub.dispatch('auth', { event: 'signOut', user:{} }, 'Auth');
console.log('No authenticated user error: ', error);
}
}

onHubCapsule(capsule) {
const { channel, payload } = capsule;
if (channel === 'auth') {
const event = payload.event;

  if (event === 'signIn') {
    this.setState({isSignedIn: true});
  }

  if (event === 'cognitoHostedUI') {
   this.setState({cognitoUser: payload.data})
  }

  if (event === 'signOut') {
    this.setState({ isSignedIn: false, cognitoUser: {} });
  }
}

}

render() {
const { isSignedIn } = this.state;
return (

signIn={this.props.OAuthSignIn}
/>
{
isSignedIn ?

:

}

);
}
}

export const AppWithAuth = withOAuth(App);
````
The above code snippet does not actually work, because there seems to be a delay after a user has authenticate itself with the hosted UI , which means that the Auth.currentAuthenticatedUser() call gets unsuccessful when redirected back to the app from the hosted UI.

So my questions are, is this an implementation that could/should work with the Hosted UI and the Hub module? If no, is there another way?

Dependencies
aws-amplify: 1.1.19
aws-amplify-react: 2.1.3

[tranqy]

I've been struggling to get the HOC component working as well. A clear working example of using Amplify with hosted Cognito authentication would be _hugely_ helpful.

[karlmosenbacher]

@tranqy I agree, that would be extremely helpful 👍

[powerful23]

Thanks for your advice. We will improve the doc for the Hosted UI Part.

[johanrin]

It is also challenging with Angular. A clear example is welcomed!

[powerful23]

Closing this issue. The doc has been updated. Feel free to reopen if you have any question.