Getting Started
    Why Webcodesk?
    System Requirements
    Install Webcodesk
    Beginner Tutorial
    Bootstrap project
    Review components
    Create main page
    Create sign-in page
    Create sign-up page
    Create initialization flow
    Create main flow
    Create sign-in flow
    Integration with Firebase
    Create sign-up flow
    Build application
    Open source code in IDE
    Open in IntelliJ IDEA
    Source code structure
    How it works?
    Writing source code
    Create React component
    Develop component in isolation
    Create functions
last edited 2019-04-11

Create sign-up flow

As you remember, the user is forwarded to the sign_up page by our scenarios in the user_sign_in flow.

There is the signUpForm instance in the sign_up page. We will use it as the starting point of the new user_sign_up flow.

Here is the use-case we will implement in the flow:

  • The user enters email and password values, and clicks the Create account button on the SignUpForm component
  • The SignUpForm fires onSubmit event and passes the values to the createUser function

    • The createUser function checks if email and password values are not empty

      • If the values are empty show error on the SignUpForm component
    • The createUser function calls Firebase create user API

      • If error is received show error on the SignUpForm component
      • If the user profile data is received forward to the main page

Create the new flow and set the signUpForm instance as the starting point.

Then add the createUser function, three items of the signUpForm, and one item of the main page, as it is shown on the screenshot below.

Connect all items in the flow as it is shown below.

This is a final step for Firebase authentication routines implementation in our application. Now let's test the application and build the bundle.

last edited 2019-04-11

Create sign-up flow

As you remember, the user is forwarded to the sign_up page by our scenarios in the user_sign_in flow.

There is the signUpForm instance in the sign_up page. We will use it as the starting point of the new user_sign_up flow.

Here is the use-case we will implement in the flow:

  • The user enters email and password values, and clicks the Create account button on the SignUpForm component
  • The SignUpForm fires onSubmit event and passes the values to the createUser function

    • The createUser function checks if email and password values are not empty

      • If the values are empty show error on the SignUpForm component
    • The createUser function calls Firebase create user API

      • If error is received show error on the SignUpForm component
      • If the user profile data is received forward to the main page

Create the new flow and set the signUpForm instance as the starting point.

Then add the createUser function, three items of the signUpForm, and one item of the main page, as it is shown on the screenshot below.

Connect all items in the flow as it is shown below.

This is a final step for Firebase authentication routines implementation in our application. Now let's test the application and build the bundle.