Intelligence Center

Appearance

Authentication ​

The Auth panel helps you manage user authentication, and content protection for your web app. This lesson will show you how to add advanced signup, and login functionality to Webflow.

It's difficult to envision the internet without user accounts.

Most web-apps and services nowadays have some form of authentication and content protection. It might even be a crucial element of the business you're trying to build.

So let's learn how to build it with Webflow, Wized, and Firebase.

In this video, we'll learn:

  • What is the Auth panel in Wized and what can you do with it?
  • Which apps can I use to manage Authentication?
  • How to it works, a practical example

What is the Auth panel used for? ​

Login, and Signup flows ​

Auth is short for authentication. And as you might expect, the Auth panel helps you manage authentication, and content protection. In other words, you can use the Auth panel to build Login, and Signup flows, and hide content from unauthorized users.

Protecting content ​

Content protection is another important part of authentication. You can choose to protect elements or pages. You can even create complex setups with multiple user tiers. Protecting

Which apps can I use to manage authentication? ​

Wized has many options for authentication.

You can use any of the following options:

  • Supabase
  • Firebase
  • Xano
  • Airtable
  • Canonic
  • Custom REST API

With Wized, you have a lot of flexibility. You can create a straightforward signup process with email and password, using Airtable on the backend, or you can set up more advanced setups with Firebase or Xano, which allow users to log-in with Facebook, Google, etc.

How it works ​

In Webflow, you can style the login, signup and other authentication forms any way you like, and then configure the logic in Wized. Now that we understand the basics, let's setup Signup functionality with Wized, and Firebase.

Here are the steps:

  • Firebase

    1. Create a free Firebase account
    2. Create a Firebase project
    3. Enable email and password authentication in the Firebase console
    4. Create a new app in Firebase project settings
    5. Copy the API key, App ID, and project ID

  • Wized

    1. Go to My Apps, and select Firebase
    2. Add the copied API key, App ID, and project ID
    3. Go to the Auth panel and select Firebase as the authentication provider
    4. In the Auth panel, click on "Create User". This will add a new request to the Data Out panel
    5. In the request, bind the email and password fields to your form inputs, and save the request
    6. Add an action to the sign-up button, call the action "Sign user up" and apply it to the sign-up submit button.
    7. Select "on click" as the trigger, and under configuration select "perform request", and select the "Create user" request
    8. Save the action, and refresh the canvas

For the Login user request, you can follow the exact same process.