Amplify-js: setting default screen to signUp using withAuthenticator HOC

Created on 2 Jul 2019  路  5Comments  路  Source: aws-amplify/amplify-js

* Which Category is your question related to? *
Setting default authState using withAuthenticator HOC
* What AWS Services are you utilizing? *
AWS AMPLIFY Authentication module
* Provide additional details e.g. code snippets *
Hello , we are using AWS amplify for authentication. We are using withAuthenticator HOC. We would like to set the default authState when the app opens. We want to set it to signUp instead of signIn. Can you please help with achieving this?

React UI feature-request

Most helpful comment

Actually, the withAuthentication wrapper checks its props for authState, so creating another HOC allows you to make signup the first screen:

~~~~
const withSignUpAuthState = (ChildComponent: React.ComponentType) => {
class Enhance extends React.Component {
render() {
return (

);
}
}
hoistNonReactStatics(Enhance, ChildComponent);
return Enhance;
};

withSignUpAuthState(withAuthenticator(YOUR_COMPONENT));
~~~~

All 5 comments

Hey @gohulk,

This is currently not possible out of the box for the withAuthenticator HOC. This seems like a nice customization that would fit well into the development for our UI component refactor. I'll go ahead and add this to the UI Component refactor milestone to track.

Hey @jordanranz ,

Thanks for your inputs. What are the options till this is implemented? Do i need to use instead of HOC? Can you please provide your inputs?

Thanks
Aravind

Hi,

I think this can be achieved by using Authenticator directly. Since it is up to you to take care of the rendering, instead of having your app wrapped, it probably works. Best is to have a look into the Authentication docs as a starting point.

best regards,

Guido

Actually, the withAuthentication wrapper checks its props for authState, so creating another HOC allows you to make signup the first screen:

~~~~
const withSignUpAuthState = (ChildComponent: React.ComponentType) => {
class Enhance extends React.Component {
render() {
return (

);
}
}
hoistNonReactStatics(Enhance, ChildComponent);
return Enhance;
};

withSignUpAuthState(withAuthenticator(YOUR_COMPONENT));
~~~~

This can be done using the new UI's withAuthenticator HOC:
https://docs.amplify.aws/ui/auth/authenticator/q/framework/react#withauthenticator

Was this page helpful?
0 / 5 - 0 ratings