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-in flow

As far as we already know all the details about how to create a flow in Webcodesk, let's get down to the use-case when the user is going to sign in the application on the sign_in page.

The SignInForm component on the sign_in page will be the start point in our use-case and in the flow consequently.

Scenario 1:

  • The user enters email and password values, and clicks the Submit button on the SignInForm component
  • The SignInForm fires onSubmit event and passes the values to the authUser function

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

      • If the values are empty show error on the SignInForm component
    • The authUser function calls Firebase authentication

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

Scenario 2:

  • The user clicks on the Create New Account button
  • Forward to the sign_up page

Create the new flow with user_sign_in name and change the start point to the signInForm instance from the sign_in page.

Implement scenario 2 - connect the sign_up page with the onCreateNew output.

Now we should implement two branches from the scenario 1.

Drag and drop the authUser function into the flow editor, and connect its callFunction input with the onSubmit output on the signInForm element.

Drag and drop one more signInForm item from the tree into the flow editor.

Take a look at the signInForm element, you should see three input points: error, inputErrors, and isLoading.

According to the description of this component, these points correspond to different properties in the form.

  • isLoading indicates the progress of the authentication request in Firebase, this is the asynchronous process and we need to wait until it finishes.
  • inputErrors is an object with indicators of the input values errors (email and password)
  • error is the text of the error when something is going bad.

The same names you can find in the outputs in the authUser function.

We should connect each output from the authUser function to the input with the equal name in the signInForm instance.

Webcodesk does not allow to connect multiple outputs of one element to multiple inputs of another element. Each connection from output point must connect the only one element in the flow.

Drag and drop two more items of the signInForm instance from the sign_in page in the tree to the flow editor. And then connect each free signInForm element with the corresponding output in the authUser function element.

Good job! We implement almost all branches of our use-case. Only "forward to the main page" branch is left to implement.

That's pretty easy - the authUser function has the success output which fires when the authentication is successful. We should connect this output with the main page element.

Go to the next step to try the sign-in page in the live.

last edited 2019-04-11

Create sign-in flow

As far as we already know all the details about how to create a flow in Webcodesk, let's get down to the use-case when the user is going to sign in the application on the sign_in page.

The SignInForm component on the sign_in page will be the start point in our use-case and in the flow consequently.

Scenario 1:

  • The user enters email and password values, and clicks the Submit button on the SignInForm component
  • The SignInForm fires onSubmit event and passes the values to the authUser function

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

      • If the values are empty show error on the SignInForm component
    • The authUser function calls Firebase authentication

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

Scenario 2:

  • The user clicks on the Create New Account button
  • Forward to the sign_up page

Create the new flow with user_sign_in name and change the start point to the signInForm instance from the sign_in page.

Implement scenario 2 - connect the sign_up page with the onCreateNew output.

Now we should implement two branches from the scenario 1.

Drag and drop the authUser function into the flow editor, and connect its callFunction input with the onSubmit output on the signInForm element.

Drag and drop one more signInForm item from the tree into the flow editor.

Take a look at the signInForm element, you should see three input points: error, inputErrors, and isLoading.

According to the description of this component, these points correspond to different properties in the form.

  • isLoading indicates the progress of the authentication request in Firebase, this is the asynchronous process and we need to wait until it finishes.
  • inputErrors is an object with indicators of the input values errors (email and password)
  • error is the text of the error when something is going bad.

The same names you can find in the outputs in the authUser function.

We should connect each output from the authUser function to the input with the equal name in the signInForm instance.

Webcodesk does not allow to connect multiple outputs of one element to multiple inputs of another element. Each connection from output point must connect the only one element in the flow.

Drag and drop two more items of the signInForm instance from the sign_in page in the tree to the flow editor. And then connect each free signInForm element with the corresponding output in the authUser function element.

Good job! We implement almost all branches of our use-case. Only "forward to the main page" branch is left to implement.

That's pretty easy - the authUser function has the success output which fires when the authentication is successful. We should connect this output with the main page element.

Go to the next step to try the sign-in page in the live.