课程: Supabase Essential Training

Email authentication

课程: Supabase Essential Training

开始一个月试用 购买团队方案

Email authentication

“

- [Instructor] Using an email and password is the most common way of authenticating on the internet. Because of this, Supabase not only supports it, but it enables it by default. Let's sign in as a user on a Supabase powered webpage. First, we need a webpage. It's going to host the form for logging in and it will load the JavaScript client and use that client to manage the login flow. So that JavaScript client is being loaded in right here through a CDN. If you don't want to use a CDN, you can also pull this in through a JavaScript package manager such as NPM. And then next we're creating a supabaseClient object. If we go here to supabaseClient.js, we have to supply in our Supabase URL and the key. And to do that, we're going to pull it from the API settings in the Supabase instance. So I'm going to copy the URL and paste it here, and then do the same with the anonymous key. I'm going to copy this and paste it in. All right, after saving this, we are now going to be loading in the supabaseClient and it's authenticated with our instance. And now we're going to go over some of these functions that are driving the login process. I'm going to scroll down to our HTML for a moment. I have a form here with an onsubmit handler, and that's going to intercept the submit event. Then I have IDs both on this form and on this div. That's going to allow us to hide the form after we log in and then show a message instead. Now, let's go back up to the JavaScript. Here's that handleSubmit handler for the form. It's going to stop the form from attempting to go to a server, and then we're going to extract the email and the password from the form, and then we're going to call this signIn function. Now, one important thing to note here about the signIn function is that it is asynchronous. When we call the signInWithPassword function from the supabaseClient, that is going to go to our instance and sign in and then return a result. And that takes a little bit of time. It's not something that happens immediately, so we need to await the promise that signInPassword is going to return, and then when that promise resolves, we will have this data. We're going to destructure both data and error from that promise. And then if there is an error, we're going to show an alert. If there's no error, then we are able to hide the form and then also display this welcome message. Let's try it now. I am going to open an integrated terminal here, just to grab index.html. You can open this file through any other method you prefer, but I'm going to do open index.html and that's going to bring up this webpage. First, let's try this with something that isn't going to work. Like I'm going to just say bob@example.com, which is a user in the system, but I'm going to type in a password that is incorrect. And it says, Login failed, please try again. So now let's try it with the actual password. And now we get this welcome message. By supporting email based authentication, Supabase enables the most popular way to log into websites. Use that signInWithPassword function and be sure to await the results.

内容