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-23

Integration with Firebase

You should not worry about installing additional libraries for Firebase SDK into the project. All dependencies were installed when you were installing components form the market.

Once we've created the user_sign_in flow, we should be able to sign in the application.

Open Live Preview and try to enter some email and password. (Also, you can test if the empty values are checked)

Yeah, unfortunately, we see the error. We forgot to add correct configuration of our Firebase connection.

First of all, we need to create a Firebase project.

  • Login into Firebase and click on the Go to console button.
  • You will be redirected to the Firebase welcome page,
  • Create a new project by clicking on the Add project button.
  • Click on the Add app button, then find and click on the </> icon button.
  • Copy config from the dialog you'll see.

Once we have copied config into the clipboard buffer, open the authenticationFunctions descriptions in the new tab (double click on the tree item).

Find the Source Code button in the top panel, and click on it.

Since the source code of the project is on the local machine, you can use the favorite IDE to edit the code. Webcodesk has only a simple text editor for the quick editing of the component's source code to not jumping between windows.

In the text editor find the initApplication function and paste config data from the clipboard as it is shown on the screenshot below.

Click on the Save Changes button in the top toolbar, and go to the Live Preview.

Try to sign in with any email and password, there should be another error.

As you can see, we don't have a user account in our Firebase project. That's why we will create the sign-up flow.

last edited 2019-04-23

Integration with Firebase

You should not worry about installing additional libraries for Firebase SDK into the project. All dependencies were installed when you were installing components form the market.

Once we've created the user_sign_in flow, we should be able to sign in the application.

Open Live Preview and try to enter some email and password. (Also, you can test if the empty values are checked)

Yeah, unfortunately, we see the error. We forgot to add correct configuration of our Firebase connection.

First of all, we need to create a Firebase project.

  • Login into Firebase and click on the Go to console button.
  • You will be redirected to the Firebase welcome page,
  • Create a new project by clicking on the Add project button.
  • Click on the Add app button, then find and click on the </> icon button.
  • Copy config from the dialog you'll see.

Once we have copied config into the clipboard buffer, open the authenticationFunctions descriptions in the new tab (double click on the tree item).

Find the Source Code button in the top panel, and click on it.

Since the source code of the project is on the local machine, you can use the favorite IDE to edit the code. Webcodesk has only a simple text editor for the quick editing of the component's source code to not jumping between windows.

In the text editor find the initApplication function and paste config data from the clipboard as it is shown on the screenshot below.

Click on the Save Changes button in the top toolbar, and go to the Live Preview.

Try to sign in with any email and password, there should be another error.

As you can see, we don't have a user account in our Firebase project. That's why we will create the sign-up flow.