Authentication Basics

So, we now have dynamic data in our application, 0:00 but what if we want to allow new users to sign up 0:05 and have those users only be able to access data that belongs to them? 0:08 Well, that's where authentication comes in. 0:13 Now much data sources, before we can utilize 0:17 an external authentication service, we need to add its plugin. 0:19 So I can go to the plugins menu at the top, open the authentication tab, 0:23 and here I have access to all of the authentication plugins available in WeWeb. 0:27 Now in my case, since I'm using Supabase, I'll add the Supabase 0:32 Auth plugin. 0:35 And from here, I can go through the configuration process. 0:40 So I'll press continue. 0:43 I want it to use my existing project, which is selected here, 0:45 so I'll press continue again. 0:47 And here I can define role tables. 0:50 Now, role tables basically let you give users certain roles. 0:51 And by that, that means they have certain privileges. So for example, 0:56 a user could be a basic user, or they could be an admin, 0:59 and as a result, they have different privileges inside of your application. 1:02 Now, I will want this at a later step, so I'm going to press Generate, 1:06 so WeWeb can generate those tables for me to use at a later stage. 1:09 And once those tables are generated, they automatically be selected 1:15 in the configuration. From here I press Continue 1:18 and our Supabase authentication is now connected So now we have this 1:21 connected the first thing I going to do is I going to go into the page navigator 1:24 and I'm going to open the page settings on my main dashboard. 1:28 I'm going to go into private access, and I'm going to open up 1:31 this configuration so I can define who can access the page. 1:34 So from here, I'm going to select authenticated users, 1:38 because I only want users who are logged in to be able to access this page. 1:41 and so with that selected I'll press save and so now this means only 1:45 if someone is signed in can they access this main dashboard. 1:49 Now here I'm not signed in and I'm able to access the page 1:53 but this is only because I'm in the editor. 1:56 In the real application 1:58 if I wasn't signed in I now wouldn't be able to access this page 1:59 and so from here 2:02 what I need to create is a sign up page in my app to allow users to sign up 2:02 and so I'm going to go into the WeWeb AI chat 2:06 and I'm going to prompt it to create a sign up page. 2:09 It will give me the action to run 2:17 to create a new page and so I can simply execute it. 2:18 It will then create a blank page with this pre-filled prompt in the center 2:22 that I can adjust if needed and then when ready I can send it off 2:25 So our page is now generated and the last piece I need to add to 2:37 this is a workflow on the signup form that on submission will sign the user up 2:40 Now most likely the AI already created some kind of workflow on this form 2:46 which I can see it has to handle the signup 2:50 And in the workflow it's using custom JavaScript 2:52 but I want to make this a bit more readable 2:54 so I'm going to convert this to no code. 2:56 so it's now converted to no code and I can see 3:04 this is a great starting point because it's already using the super base 3:06 signup action 3:09 so I'll just check this super base signup action to see what it's sending 3:10 so for the email it's sending the correct value 3:13 and for the password it's also sending the correct value 3:17 now one thing to note with super base is that if you are allowing users 3:20 to sign up using an email and password, 3:23 then by default, Supabase puts in email verification. 3:25 And I don't want this. 3:29 So what I'm going to do is I'm going to go into Supabase. 3:30 I'm going to go to authentication. 3:32 I'm going to go to sign in and providers. 3:33 I'm going to click on email. 3:35 And here, I'm going to turn off confirm email and then save this. 3:38 So with that now turned off, I'll switch back to WeWeb. 3:43 And so I know in this signup action, we're now sending the correct information. 3:45 And so when someone does sign up, what I want to direct 3:49 them to is a page and I want to direct them to the homepage. 3:51 Super. 3:55 So I can now test this in preview mode 3:55 And so when I press create account 4:01 I should be signed up and then directed to the dashboard 4:02 Super. So that looks like it worked. 4:08 And I can confirm this by in the left panel 4:10 inside of the debug menu, opening the variables tab. 4:13 And at the bottom here, I have plugins and I can see that is authenticated is true. 4:18 So I'm signed in and in the user object, 4:22 I can see all of the information of me as a user 4:25 And if I also go into Supabase, in the authentication tab, 4:28 now inside of users, when I refresh, 4:32 I can see I now exist as a user. 4:35 And so now that we have our base authentication set up, we can set up 4:38 other pages and logic around our authentication. 4:42 So for example, I could create a sign-in page 4:45 that would work much the sign-up page, however it would now sign the user in. 4:47 And I could also set up logout logic. 4:51 So for example, I have this logout button in the top right of my dashboard. 4:53 so I could add a workflow to it where on click, I trigger the Supabase 4:57 authentication action to sign the user out. 5:01 And I could then, once I have the page created, navigate them 5:03 to the sign-in page. 5:07 Now that we're properly authenticating users, the next step 5:09 to ensuring security in our application will be making 5:12 sure that users can only read and edit data that belongs to them. 5:15 I'll see you in the next step to learn how we do this. 5:19

You need to sign up for Treehouse in order to set up Workspace

Sign up