Supabase Authentication
In order to use authentication, you will need to create a project on Supabase where we will then collect all the emails of our users.
Authentication comprises of following steps:
Before getting started with this section, ensure you have:
- Completed Supabase setup required for authentication. (Skip if you have already enabled the integration of Supabase in Teta)
- Add the Text field widget inside the Column and change its Hint Text to Email.
- Add another Text field widget below and change its Hint Text to Password.
- Finally, add the Button widget from the Widget Panel and change the Value to Sign Up, to send data to the database.
Use these steps to automatically create a new account:
- Select the Signup button from the Tree Area.
- Click on Actions + (on the right side of your screen).
- Find the Action Type dropdown and change it to Supabase Auth.
- Find the Gesture dropdown below and change it to OnTap.
- Find the dropdown below and select Sign up.
- This action needs three States to be created, Email, Password and Status. You can create these states inside the Scaffold.
- Finally in the Which Page? select the page that you want the user to sign in on once logged in.
Now we need to go and create an action on each Textfield in order to have the data saved within the database.
- Select the Text field button from the Tree Area.
- Click on Actions + (on the right side of your screen).
- Find the Action Type dropdown and change it to State.
- Find the Gesture dropdown below and change it to OnChange.
- Find the dropdown below and select Change with .
- Finally in the first one select Email.
- In the second Textfield, going to insert at the end instead of Email, Password.
You can test the Email/Password Sign Up in Play Mode.
- Click on the Play button (top right corner of your screen)
- Open the signup form and enter your Email and Password and click on the Button.
- The page selected at the beginning will be opened.
- Going into our Supabase project, you will see in users the registered user.
To do the registration just perform the exact same steps done for the Sign Up, but change the action of the button.
- Select the Sign In button from the Tree Area.
- Click on Actions + (on the right side of your screen).
- Find the Action Type dropdown and change it to Supabase Auth.
- Find the Gesture dropdown below and change it to OnTap.
- Find the dropdown below and select Sign in with credential.
- Finally in the Which Page? select the page that you want the user to log in.
Last modified 9mo ago