CODEWITHSUNDEEP
amazon-web-servicesreact-nativeamazon-cognitoaws-amplify
Petar Ivcec
Petar Ivcec

Reputation: 756

AWS Amplify Auth + React Native - attribute value for phone number must not be null

I have followed the following steps in order to get Amplify Auth login flow working on React Native:

  1. created project with Expo, ejected to ExpoKit
  2. yarn add aws-amplify, yarn add aws-amplify-react-native
  3. react-native link
  4. amplify init
  5. amplify configure
  6. amplify add auth
  7. amplify push

The React Native app that I am running consists of a main App.js component with the following imports: 

import React, { Component } from "react";
import { StyleSheet, View, Text } from "react-native";
import Amplify, { Auth } from "aws-amplify";
import AWSConfig from "./aws-exports";
Amplify.configure(AWSConfig);
import Tabs from "./Tabs";

My main App.js file also has two tabs (one for SignIn component and another for SignUp component).

My SignUp component looks like this:

...
  signUp = () => {
    Auth.signUp({
      username: this.state.username,
      password: this.state.password,
      attributes: {
        email: this.state.email
      }
    })
      .then(() => console.warn("successful sign up!"))
      .catch(err => console.warn("error signing up!: ", err));
  };

  confirmSignUp = () => {
    Auth.confirmSignUp(this.state.username, this.state.confirmationCode)
      .then(() => console.warn("successful confirm sign up!"))
      .catch(err => console.warn("error confirming signing up!: ", err));
  };

  render() {
    return (
      <View style={styles.container}>
        ...
        <Button title="Confirm Sign Up" onPress={this.confirmSignUp} />
      </View>
    );
  }
...

My problem is that when I try to sign up a user then I get:

attribute value for phone number must not be null

When I check the attributes of the User Pool that was automatically created at: AWS cognito console then

email

is the only "standard attribute that is required".

Please advise.

Upvotes: 1

Views: 1648

Answers (1)

Sushen Kumar
Sushen Kumar

Reputation: 21

You can do something like this: In your component class initialise state to remember the 'email_address' and 'phone_number' inputs, and make sure to set the "onChange" function of the textInput to "this.setState({phone_number: value})"

`class myClass extends React.component{
    constructor(props){
        super(props)
        this.state={(email_address = undefined;
                     phone_number= undefined;)}
  }
    ... //Same code here

   signUp = () => {
    Auth.signUp({
      username: this.state.username,
      password: this.state.password,
      attributes: {
        email: this.state.email
        phone_number: this.state.phone_number
      }
    })
      .then(() => console.warn("successful sign up!"))
      .catch(err => console.warn("error signing up!: ", err));
  };

    ....//Some code
}`

Upvotes: 0

Related Questions