How to remove "Create account" Signup from Amplify Auth UI with React Native?

0

I have a login screen in a react native app with Amplify Auth. below is the code with the default Authenticator configuration. I'm using Amplify V6 Does anyone know how to remove the Signup functionality? I need to remove "Create Account" my app doesn't need it. thanks

Enter image description here

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, Button } from 'react-native';
import { Amplify } from 'aws-amplify';
import { USER_POOL_ID, USER_POOL_CLIENT_ID, IDENTITY_POOL_ID} from '@env'
import { getCurrentUser, signOut, signIn } from 'aws-amplify/auth';
import { withAuthenticator, useAuthenticator} from '@aws-amplify/ui-react-native';

const amplifyConfig = {
  Auth: {
    Cognito: {
      userPoolId: USER_POOL_ID,
      userPoolClientId: USER_POOL_CLIENT_ID,
      identityPoolId: IDENTITY_POOL_ID,
    }
  }
}
Amplify.configure(amplifyConfig);

async function handleSignOut() {
  try {
    await signOut();
  } catch (error) {
    console.log('error signing out: ', error);
  }
}

  function App() {
  return (
    <View style={styles.container}>
      <Text >Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
      <Button title="Sign Out" onPress={handleSignOut} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});


export default withAuthenticator(App);

mvp
asked 2 months ago208 views
2 Answers
1

To remove the "Create Account" option from the Amplify Auth UI in your React Native app, set the hideSignUp option to true in the withAuthenticator component. Here’s how you do it in your code:

export default withAuthenticator(App, { hideSignUp: true });
profile picture
EXPERT
answered 2 months ago
  • Still doesn't work. I've reset simulator settings, cleared cache, rebuild the project. And it keeps showing the "Create Account" link I also tried the following code, but it doesn't work

      function App() {
      return (
        <Authenticator.Provider>
            <Authenticator hideSignUp={true}>
              <View style={styles.container}>
                <Text style={{ fontSize: 30}}>Open up App.js to start working on your app!</Text>
                <Text style={{ fontSize: 20, color: 'gray'}}>You should see this page only if you are authenticated</Text>
                <StatusBar style="auto" />
                <Button title="Sign Out" onPress={handleSignOut} />
              </View>
             </Authenticator>
        </Authenticator.Provider>         
      );
    }
    
0
Accepted Answer

I missed this documentation: https://ui.docs.amplify.aws/react-native/connected-components/authenticator/configuration#hide-sign-up

here is the solution

<Authenticator.Provider>
      <Authenticator
        components={{
          SignIn: (props) => (
            <Authenticator.SignIn {...props} hideSignUp />
          ),
        }}
      >
......
      </Authenticator>
    </Authenticator.Provider>
mvp
answered 2 months ago
profile picture
EXPERT
reviewed a month ago

You are not logged in. Log in to post an answer.

A good answer clearly answers the question and provides constructive feedback and encourages professional growth in the question asker.

Guidelines for Answering Questions