Amplify-js: CustomUi withAuthenticator

[supun19]

i need to change only signup ui beacuse i want to custom attribute field to ui. so try https://github.com/aws/aws-amplify#3-override-default-authentication-screens. but it not work

export default withAuthenticator(connect(mapStateToProps, mapDispatchToProps)(Login),false,[ <SignIn />, <ConfirmSignIn/>, <MySignUp/>, <ConfirmSignUp/>, <VerifyContact/>, <ForgotPassword/> ]);

i change only signup component. i expect signin component show first but its not show that always show MySignUp component.

could you suggest how change only sighup ui other wont change

[dobon]

I have the same problem. Any update?

[richardzcode]

Hey @supun19 @dobon , this was a bug which we had fixed last week but not in stable release yet, only in beta. Could you try npm install --save aws-amplify-react@beta? The fix is going to be in stable release soon.

Using Authenticator directly has this option:

    <Authenticator hide={[SignUp]}>
        <MySignUp />
    </Authenticator>

Like mentioned in this guide: https://github.com/richardzcode/Journal-AWS-Amplify-Tutorial/tree/master/step-03

[dobon]

Confirming that this works as expected with aws-amplify-react@beta

Specifically, it removes the default SignUp component, and replaces it with the custom MySignUp component, which is shown all the time unless explicitly hidden using auth state. To only show your custom MySignUp component during the SignUp step, set "this._validAuthStates = ['signUp'];" in the constructor OR implement 'showComponent(theme) {...}' instead of 'render() {...}', as described here: https://github.com/aws/aws-amplify/blob/master/docs/media/authentication_guide.md#3-authenticator-component

Thanks for the tutorial link, that's also useful.

[supun19]

thanx @richardzcode

[ns6482]

Hi, using aws react and react native beta, but failing to hide the "sign up" button and only showing "hi" once signed in.

Not sure if I am not following the docs correctly, can someone kindly advise where I am going wrong here?

class App extends React.Component {

    constructor(props) {
        super(props);
        this._validAuthStates = ['signedIn'];
    }

    render() {
        return (
            <View>
                <Text>hi</Text>
            </View>
        );
    }
}


class AppWithAuth extends React.Component {

    constructor(props) {
        super(props);
    }

    render() {
        return (
            <View style={styles.container}>
                <Authenticator hide={[SignUp]}>
                    <App />
                </Authenticator>
            </View>
        );
    }
}

[steve-a-jones]

@ns6482 - Agreed... I cannot figure this out either.. we really need an example of how this works..

The docs state:

in the component's constructor, then implement showComponent(theme) {} in lieu of the typical render() {} method.

Shouldn't _validAuthStates be a prop passed to Authenticator? It seems wrong that we would need to do anything more than that as Authenticator should easily be able to conditionally render its children.

Adding instance properties to App tightly couples App to Authenticator as well.

[richardzcode]

A couple of topics here,

1. Once signed in you should see your App rendered. So seeing 'hi' is correct.

If you'd like App only show when signed in then just check authState prop in render

class App extends React.Component {
    render() {
        if (this.props.authState !== 'signedIn') { return null; }

        return (
            <View>
                <Text>hi</Text>
            </View>
        );
    }
}

1. Hiding 'SignUp' does not hide 'sign up' button. It is because 'sign up' button is part of SignIn component, which has no 'hide' information of Authenticator.

We will work on a solution for this.

[mbudm]

Related perhaps, in this line you hide defaults if any children are added to a withAuthenticator() call. This means that if you attempt to compose a use a standard Amplify components they render null - because they are in the hide default list

https://github.com/aws/aws-amplify/blob/master/packages/aws-amplify-react/src/Auth/index.jsx#L80

[michaelcuneo]

I'm also having the same issue. I don't want my entire component to be within the Authenticator... so I've just got two of my

<Switch>
  <Route path="/">
  <Route path="/about">
  <Authenticator>
    <Route path="/settings">
    <Route path="/search">
  </Authenticator>
</Switch>

I cannot for the life of me get any details about the authState inside settings or search components.

The example by @richardzcode half works. It's not showing me the Authenticator when I've logged in, but it's not showing me my rendered components either.

So it definitely hides what I want it to hide, but doesn't show it.

  render() {
    console.log(`Current authState = ${this.props.authState}`);
    if (this.props.authState !== 'signedIn') { return null; }
    const region = makeSelectActiveRegion;
    return [
      <SearchWrapper>
      .
      .
      .
      </SearchWrapper>
      ]
   }

Current authState is null, inside a component wrapped with <Authenticator /> ... What more do I need to do?

[richardzcode]

@michaelcuneo you may listen to event of Authenticator, something like this:

<Authenticator onStateChange={this.handleStateChange} />

This example uses Greetings but idea is similar: https://github.com/richardzcode/Journal-AWS-Amplify-Tutorial/tree/master/step-02#5-home-page-aware-of-authstate

[michaelcuneo]

@richardzcode I managed to do it in an entirely different manner. Instead of wrapping my components, the Authenticator is it's own entirely seperate path. So now I can run a Hub listener in there, run an onStateChange, and wrap all of that into it's own component, with listeners, sagas, reducers, and actions. Now it manages it's own state irrelevant of the rest of the app, but I can pull that state when necessary.

[jarrettj]

Hi,

Good day.

Anybody have experience hiding the SignUp button for an angularjs project?

Thanks.

[jordanranz]

@jarrettj See the following url for instructions on creating custom UI:
https://aws-amplify.github.io/amplify-js/media/authentication_guide#customization

I am going to close this issue as the original issue seems to have been solved. Please reopen if there are any more related questions/issues.

[jarrettj]

Cool thanks man. I used css to hide the signup button.

[ymaghzaz]

I created a lib that help you customise amplify authentication UI, please check https://github.com/ysfmag/aws-amplify-react-custom-ui

[shivamarora123]

Please check this link->https://medium.com/@coryschimmoeller/customizing-the-authentication-experience-of-amplifys-withauthenticator-e6f2089ff469