How to Add Authentication to an Angular 16 App with Supabase

[Music] thank you hello everyone welcome to another video tutorial on the cool language YouTube channel in today's video we'll be using unglass 16 and Super Bass to create an authentication application so as you all know angler has been making lots of changes to the framework so I thought why not integrate it with Super Bass so if you are not aware of what Super Bass is all about Super Bass is an open source Firebase alternative for building secure and performance postgres backends with minimal configuration so we'll be using Firebase for our backend service while angular 16 will be used for the front end of this application a few things that you expect to learn in this tutorial is how to use charge GPT to generate a design interface that is every component which generates the design we created through the use of charge gbt who also creates lazy loaded routes in angular 16 in case you are not aware angular is taking a much more functional approach to routing so I'll show you how you can creates lazy loaded routing angular 16 and then we will integrate the newly created provide HTTP client in our glass system that is when we create an angular service instead of making use of the HTTP clients module because application is going to be modulus we'll make use of the provide HTTP clients then we're going to make use of reactive forms also in our glasses 10 so I'll show you how you can create reactive form validations for our form authentication and lastly you should also expect to learn how to integrate Super Bass into an angular 16 project so if you are new to this channel make sure you like And subscribe to the channel so the YouTube algorithm can push our videos to people out there who are not aware it exists so without wasting much time let's get started so the first thing we're going to do is to generate or create a new angular project this project is going to be a standalone project so to create a standalone projects in angular let's run the following command you can just run NG new then the name of the projects I can just call this super oats and then give it a standalone flag so with this we'll be able to generate a new angular project with a standalone configuration as you can see we get asked the usual prompt messages would you like to have routing added to this project the answer is yes we like to have routing and then we'll choose CSS for our styling so a new Standalone components or rather a new Standalone project is going to be generated for us as you can see the configuration for a new project has been complete so we can now move into the directory of that project by running the CD command in the terminal so I can just say CD then the name of our project which I call Super odds I think then I can open it up in Visual Studio code and then we can move on from there so now that's Visual Studio code is open I need to expand some of the text on going to increase the fonts of Visual Studio code so you can see the code more clearly so I'm going to open the SRC directory and then the app directory as you can see we just have the normal boilerplate code generated for us in a new angular project the app components config file the app routes files just the basic templates we need so the next step I'm going to take is to create all the needed components for this projects so we need the login components the register components the ohm components which is also going to be the landing page then we need the dashboard component and then the navbar component so quickly I'm gonna open the terminal once again I'm going to clear everything we have right here and then I'm going to generate these five components so the first one I'm going to create is the login component in fact I'm going to create everything at once so how do I do that I can just run NG generate components and then it's going to be inside of a components folder and then I'm gonna call the phase components login so NG generates components they see the first C stands for components and then this component is the folder where the login component is going to be generated so I'm just going to add the and command and then I'm going to run NG generates components and then still inside the components directory I'm going to generate the register components and then same command for the ohm componential NG generates components then we have components and then we run another command NG generates components then components four slash dashboard and then finally we can run the we can generate the last components which is going to be called navbar so energy generates components forward slash nav bar I think this is all the components we need for this project so I'm just going to press enter and all five components is going to get generated for us as you can see all five components has been generated beautiful so I head back to the visual studio code and I expand the components folder as you can see we have the dashboard the home login navbar register component so the next step I'm going to take is to generate the designs for these components like I said I won't be creating the design on my end I'm going to rely on charge GPT so to create the designs for us so what I'm gonna do is just to go to the charge EBT website so I'm just gonna say chats jipit chat.openai.com I think that's the URL so navigate to charge GPT so if you don't have a chargeable account you can go ahead and create a new account right there so what I'm going to do is to um create a new chat once I already have an account so um I can just proceed to accessibility to do what I wanted to do so the first design I want is the register components so I'm gonna say create a simple design for a login page with email and password impute Fields so I think that's all I need to tell chargibility to do let's see what it comes up with so as you can see this is the design chart GBC came up force it has a form in the HTML that contains the input type of email input type of password and then the submit button so and this is the styling so what I'm going to do is I'm just going to grab the CSS so I'm going to copy from this container right here I'm gonna grab everything so I'm gonna copy that and then I'm gonna Edge straight to the probably we can just go to the register component and then I'm going to paste this in the register component.css so we have that and then I'm going to copy the HTML as well so I'm just gonna grab this div right here so I'm going to copy that head back to my visual studio code and then open the register component.html and then paste it right there so in the heading I can just see I have an adding of H2 and within the H2 then I can just say register or registration page that's just a registration page so next up is for me to change this button from login to register so it's gonna be register button and then I'm gonna copy everything right here okay I'm gonna change this login to register as well so I'm gonna have register and then I'm going to copy everything right here and then add to the login components paste it right in and then everything that has login and everything that has register I'm Gonna Change to login so this is our login page so I'm gonna change registration page to login page I think that's all and we need to copy the CSS as well so I'm going to open the login CSS page and then I'm going to paste in the CSS design I want to save everything we've done so far and then close the tabs so before I proceed one way to install the CSS file so just configure our Global styles that is I'm going to add a body style which is going to apply to every component I'm gonna give it a margin of zero and then a padding of zero as well as box sizing of Border box so I'm going to save that so we've been able to generate the design for the register and login page so the next design we need to generate is the navbar component so I'm just going to say generate a simple navba with register and login texts so let's see what charge GBC comes up with Force so it comes up with a nav bar with register and login so I'm going to copy the CSS for that so I'm going to copy the nav bar to head straight to our Visual Studio code open up the navbar components the CSS file I'm going to save that and then for the navbar HTML I'm going to open that up and then grab the simple design charging PC came off first look it's just a div and a UL tag very simple design so we don't need more than that this is my major project so we are done with that so the next design we need is the home that is a landing page so I'm going to charge ability to generate a landing page design for us so create a landing page using HTML and CSS so let's see what charge GBC comes up with so as you can see chargpt has come up with a simple design for our landing page so I'm gonna grab the CSS as well so we have this Aerial Class and I'm going to keep copying it I'm gonna copy the all of the CSS and then it straight to our components and then open up our home components and then paste in The Styling and open up the HTML as well so I'm going to grab the design charging BC came up for us for the HTML and then I'm gonna paste it right there so I'm Gonna Save and then I'm gonna close the tabs I think the final thing we need charging Beauty to generate for us is the dashboard we don't have a dashboard design so we need a simple dashboard design so I'm gonna say generate a simple dashboard design using HTML and CSS so let's wait for charging which is to generate this Force so we may need to tweak some of this as you can see in the dashboard we have a list containing dashboard others customers I guess I should have told it what we wanted to show for us um but still let's just copy the The Styling we can still make the configurations once we are out to this component so for now let's just copy everything charge GBC generated for us and then head straight to the dashboard component CSS paste all the styling save add to the components HTML for the dashboard so I'm going to grab everything right here and dashboard as a sidebar so um I'm interested to see how that looks like so I haven't seen this before I haven't worked with this before with this design before so it's just something out of the box so we are learning to get a charge GPS like a assistance for this project so I think that's all we need to do we've generated all the designs thanks to GPT so I'm going to close the charge gbt tab in Chrome and then the next step is first to configure our routes like we want to see all the designs and also see the designs of course we need routing to do that so I'm going to head straight to the routes file that's app.trouts.cs file as you can see we have an import already that Imports route from at angular router and we have an a router array right here so inside this array I'm going to create the paths to the route so each route is going to be lazy loaded which takes a functional approach so the first route we need to create is the login route so I'm just going to open a bracket and within this brackets I'm going to have a part so this part is going to be the name of the route you want to create so this is going to be the login route so I'm just gonna say login and then comma within this bracket I'm going to call the load components because this is a load this is loaded routes so with it so next up I'm going to create an arrow function and then call the import keyword and then we need to import the parts to the routes so to do that I'm just gonna say dot four slash within the components directory because the login is located in the component directory so I'm going to say components for slash login for slash login dot components because that's the name of our file and then it returns a promise so we're gonna make use of the then and then so I'm gonna say com and then call the arrow I'm gonna say com dots login components so that's our first lazy loaded route created for us so this is the syntax to create that just to confirm the components folder doesn't have an S so it's four slash component slash login slash login dot components so I'm just going to duplicate this two more times because I want the register components to be this loaded as well so I'm just gonna say the parts is gonna be register and then the party is gonna be register so it's gonna be four slash component slash register slash register dot component and then this is going to be a register component so I'm gonna say register component so that's all we need to do there then the next lazy loaded route we want to create is called the dashboard so we want the dashboards really it's loaded as well so I'm going to say Parts is dashboard and then four slash dashboard and then we're gonna change the login components here to dashboard components awesome so I want us to create two more parts the next one is going to be the Own Parts I don't want the Own Parts to lose loaded so I'm just gonna do the normal um route the normal routing configurations which is going to be Parts um and then I'm gonna call components home components which we need to import because this is not a lazy loaded component so we need to import the own components and for some reason intellisense is not helping us with that term I need to import it manually and before I do that we need to set the white card parts that is the part where if any part does not match a specific parts we get redirected to the home parts so what I'm going to do is I'm going to call the path keyword and then within that I'm going to create a white flag using double Aesthetics so I'm going to redirect to the ohm components and then I'm gonna set path match to full because without this the routing would not work so quickly let me go above right here and then import the ohm components so I'm gonna import home components from dots four slash components four slash home for slash home dot component so I'm Gonna Save and with this the configuration for uh route is complete before we go let me just quickly correct this the dashboard part is not spelled correctly so I just corrected that now and with that we can now move to the next step of this tutorial so I'm gonna open the main.cs file so here is where we complete the configuration of our parts so this is where we bring in the routing file and it gets configured in a providers array so to do that the first thing I'm going to do is to get rid of some imports I think the first one I'm going to get rid of is this app config file I don't think we need it and then we can now begin our configuration So within this bootstrap application I'm going to open a brackets and Within These brackets we will ever provide us so I'm going to say providers and then I'm going to create an array so I'm going to import the provide router so quickly let's just type in the provide router which we need to import as you can see it's imported for us above and we're going to call the routes array right here so we need to import the router from app.trouts file so what do I mean by by this when you check the up.straus file the variable we created which is routes is what we are importing in the main.cs file this allows our routing to be integrated into the base of the application this is a new format in angular 6 16 rather so this is all you need to do so I'm going to save and then I'm going to head straight to the app components dot HTML file this is like the base of our application so this is where we're gonna configure the nav bar so right here I'm going to bring in the navbar tag so that the nav back will be reflected throughout the design of the application so I need to grab this Electro which is up Dash navba and then import the tag right here call the selector I need to inject it into the app component CS file because now we are dealing with a standalone component so I need to import the navbar components so let me just grab this navbar and then add straight to appcomponent.ts file so that the error is going to be fixed all I need to do is just import the navbar components and we're good to go you can see the arrow disappears and then I'm going to close the app components yes file as well as the app nav component.js file then before I compile this application I'm going to import the router Outlet without this ha component is not going to have routing integrated so I'm going to save I believe I've saved everything I've created so far so I'm going to open the terminal clear of the terminal and then run and reserve and wait for our projects to compile now the project has compiled we have an arrow as you can see here right so it says it can't resolve background jpg which is found in home component.css so I'm going to illustrate to homecomponent.css file so we have it right here so I think this is because we don't have any background image set so this is not including the application so I'm just gonna get rid of spark class CSS attributes so I'm going to save and the projects will recompile and hopefully this compilation should be successful so I'm gonna just gonna run localhost for a 200 as you can see this is the landing page of our application this is enough bar we have a login button and register button this doesn't look too pretty and then this is the landing page so if you want to see the login for now we haven't configured the routes that is the login I register also for me to go there I need to do for slash login this is our phone oh our form is not too bad so let me check the register form so I'm gonna navigate to the register page so we have a login form and then a register form so I'm gonna get rid of this registration page we have right here I think it's not needed it makes the design not to knit so I'm gonna add to the login and register components so in the login component right on top of here I'm going to get rid of the login page texts and then in the register component as well I'm gonna get rid of the register page texts so I'm Gonna Save that and let's check it out this looks much much more better so to confirm if a register components and our login components are lazy loaded when you check the compiler you can see this text right here it says lazy chunk files so it says register component Cs and then login components yes so that means both components are lazy loaded so next up we can now start working with our service in angular so I need to generate a new service file yeah so to do that I need to stop this terminal of course and then I'm gonna run NG generates service and it's gonna be inside of a service folder and I'm gonna call it super because we're using Super Bass to create the back end authentication for these applications I'm going to create a new service as you can see the service is generated for us so I can just open Visual Studio code as you can see right here we have a new service file which is perfect so the next step is to integrate the provided HTTP claimed in angular to do that we need to head straight to the main.ts file so this is where we need to configure this just like we configured our route here so in the main.cs file we need to import provide HTTP clients so after the provide router I'm gonna add a comma and I'm going to open up an array and I'm going to say provide HTTP client which we need to import and it's going to have a parentheses so we need to import this like I said so provide the HTTP clients well intellisense is not working so I need to import it manually so I'm going to say import provided CP clients from at angular it's going to come from the angular common HTTP so I'm going to say at angular slash common slash http so with that uh service has been configured and then we can create a new super based project because now we need to start creating the functions in our Super Service file but we need some things from Super Bass to do that which is our backend service so if you don't have a super based account make sure to go create one I already create a new super based account so once you create an account you need to create an organization so I already did that my organization is called the sugar 10 and you need to create a new project so with the new projects you can get an API key as well as the URL to the backend service because we're going to have a URL we need to we need to connect to so quickly I'm going to click on new projects and it's going to ask which organization do you want to create a new organization or you want to select your current organization I think I'm going to go with my current organization and then a form is going to pop up as you can see this form shows our organization and then we have input Fields such as the Project's name the database password and then the region as well as the pricing plan we're going with the free plan because this is just the side projects we don't expect any user for this project so so a free project is ideal so the name of this project I'm going to call it NG Dash super Dash odds and then the password needs to be something strong something very unique or else it won't allow you to create a project for instance if I just type in one two three four five six seven you see this is the top 10 Common password you need a stronger password and then the creates new projects button will disabled I think this is a very good feature so it makes sure it ensures you use a very strong password so I'm gonna use a unique password probably I'll just use bit to adding to generate a new password bitwading is a password management application I use to manage my password so I'm just gonna paste in the password you can see the password is said to be strong and now they create new project is enabled so I'm going to select a region I think I'll pick a region in Europe since Europe is closer to Africa I'm creating this project from Africa um okay when I go with London I think we have the same time zone with London and then the server should be closer to Africa makes it faster so I'm going to create a new project and then let's wait for that to get configured as you can see it's retrieving the API keys and it's generated for so the two things we need is this public API key as well as the URL for the database it's like a restful endpoint for querying and managing a bit database so it's a very very important URL to use this in our projects we need an environment folder that contains the environments file for development and development file for production so to create the environment folder in previous versions of angular it comes by defaults within the project configuration you'd have seen the environment for that ball in onglass 16 you need to generate it yourself so I'm going to add to the terminal and I'm going to generate a new environment folder by running the command NG generates and environments as you can see it creates two file for us the environment.cs file and the environmental development.cs file which is what we're going to use the environment.development.cs files Within These objects I'm going to create a variable called production and I'm gonna set it to false and then next up I'm going to create a supervised key objects and then I'm gonna have a URL within the objects which is going to contain the URL from our database as well as the key the API key so those are the two important things we need so I'm going to head back to the supervised dashboard the first one I'm going to copy is the API Keys which is public as you can see right here and then I'm gonna open our projects environment development file and I'm gonna paste in the API key then I'm going to grab the URL which we have right here um I'm gonna paste it within this URL key so I'm going to save and that's all we need to do in the environment.development.cs file so if you want to push to probably a version control system like Git You can just include it in your dot ignore file so your API keys don't get exposed and your app doesn't get compromised so the next step for us now is to install Super Bass of course without installing super these how are we going to make use of supervis there's no way we can make use of supervised so quickly I'm gonna install Super Bass by adding to the terminal and running the command npm install at Super biz for slash Super Bass Dash JS so this is gonna install super bass into our projects while Super Bass is installing I can as well add the validation for the login and register forms so I'm going to add to the browser and for our projects which is right here we can just add the validation for both login and register so I'm going to head straight to let's start off with um register so to create validation for register so we need to import some important modules in angular the first one is the reactive form module we need the phone Builder we need the form group as well as the validators so quickly I'm going to head straight to the Imports array we have right here and then I'm gonna type in reactive forms module and then we need to import it so I'm going to say Imports reactive formal use from at angular forms so what I also need here is the form Builder so I'm going to import the form Builder as well as from group and then finally I need the validators this is cool now we need to create an instance of the form group so right below the Esports class I'm going to create a register form variable so I'm going to say register form and then I'm gonna assign it to the form group it needs an initializer to get rid of the error so I'm going to put an exclamation mark right there so we need the Constructor to proceed with this I'm going to create a Constructor so inside this construct I'm going to import the form Builder with this we can now reference the register form within this control what do I mean by this I can just say this dot register form is equals to this dot form Builder we need the phone Builder load group I need to configure the email as well as the password so for the email I need to create the violation so I'm gonna just gonna say email formbuilder dot control then vidators dot require I'm going to say dividers dot require as well as if I let us dot email and then I'm going to say the main length as well so I'm gonna say bydators dot mainlands I'm going to set that to five so I believe our email should be at least five characters so I think that's all we need to do for the email then for the password so I'm gonna say formbuilder.control and then I'm going to have the validators that's required as well and the invaliders.man lens which is going to be seven The password should be at least seven characters in my opinion so with that we can now close the brackets so I can now save I think dividitions are now set properly we have the email which is required the password which is required we have the main lens and then the videos those emails that says if it's not an email it's going to throw an error so to display this error we need to add Street to our HTML file in the register component So within this register components in the form I'm going to call the form group so I'm going to say form group and then I'm going to call the name of the form which we called if I scroll up we call it register form right so I'm just going to reference it right here so our phone group is able to track the form and then next up we need to display the error messages but before we do that within the inputes fields we need to pass in the form control name which we configured in the register component.ts file so I'm going to say form control name is close to email I think this is the email field so the same thing is going to be for the password so I'm just going to grab the form control name and then within the input field for the password I'm going to say form control name and then I'm going to set that to password because if you check this we call the form Builder groups email and then password it has to be the same so that it gets access to each of the input field in our HTML file so that's the first step so the second step is below the input stack I'm gonna make use of the eye tag that is the italic tags in HTML to display the error message so I'm going to style it by giving it a style color of tomato so I'm gonna say color and then the style is going to be called tomato which is a form of red and then we're gonna make use of the NG directory to display the error message so within the eye tag I can just say NG if if register dots I'm using GitHub copilot for as a plugin on my project that's why I'm getting so many suggestions so I'm just gonna say NG if is equals to registerform dot controls and I'm gonna reference the email that's invalid that is if the register form is invalid it's gonna display an error message so the NG if registerform Dots controls dot invalid but we're not going to stop here we're going to create another condition that is if the register form those controls dot email is dead sea or the registerform.controls.touched then the error message should be displayed what do I mean by this it anytime the user goes on the page and then they click on the input field that is they touch the form or they type something in between the form the error message starts to get displayed and their message you want to display is email is required and must be valid so the the same configuration we need for our password as well so I'm just going to copy that I'm below the inputs tag I'm going to paste that in and we're just gonna make some few changes so the first change is we'll change all the emails to password so this is gonna be password because that's the name of a form control and it's practically the same thing if the form is invalid if the form is touched if the form is dirty then display a certain error message so false and the password we're gonna say password Most B at least seven characters so I'm gonna save everything we've done so far and let's see if this works and before that we need to restart our compiler meanwhile our npm package for Super Bass has been installed so I'm just gonna run and reserve and wait for the projects to compile and while the project is compiled you can check the package of Json file and we can see the Super Bass version installed is version 2.2 2.0 so if you are following this project this is the current version in the future a new version might have been created so you need to take note of that see our price has finished compiling so I'm gonna refresh the page just in case and then I'm gonna type in an email address and see we configure the register component so I'm just going to say register so we're in the register form so I'm going to start typing in an email the you can see the error message starts to show immediately we start typing in since email issue card that must be valid so I'm gonna say the code angle that's Gmail so immediately it says that it's a right Gmail address it takes away the error message but if I start playing the field it says the email is required and must be valid same thing with the password once I click on the form or the form is dirty that is if I click outside of the form it says password must be at least seven crafter so I need to type in at least seven characters to get rid of that error message so we can just disable the button as long as the form is invalid so in the button tag I can just make use of the disabled attributes so I just say disabled and then I call register form dot invalid so if it's invalid you can't submit anything within the form so I'm going to save that and let's just quickly test that out as well so refresh the page as you can see you can click on the form right now it's disabled except both fields and are enabled so if I say the code angle at gmail.com and then type in the required amount of passwords the field the form is enabled it's gonna submit so I'm gonna add straight to the visual studio code and what I'm going to do next is to quickly copy and paste this configuration in our login component so quickly in the login components I'm gonna grab everything inside of the Constructor in fact everything from this register form I'm gonna grab it and then I'm gonna copy it and paste it right here so all I need to do is just to change the register form to login form and then import the right modules so for instance we need to import the form group right here so before we do that we need to grab the reactive forms module as well so I'm just gonna grab everything right here and then paste it in the login component.ts file copy the register forms module paste it in the import array I think that's also we need to do since it's the same field so we just need to do the same thing in the HTML so I'm just going to save this and then open up the login component.html file as well as the register component HTML file so I'm going to grab the configurations for the form group and then paste it inside of the form tag right here so instead of register form we have login form and then for the error messages same thing applies I'm gonna grab the I tag we have right here and I'm going to copy that head straight to the input tag we have right here just below it's gonna paste in the italics change the register form to login form and then within the input tag we need to pass in the form control name and then pass in email so the last the last one we need to copy is the eye tag for the password warning so I'm just gonna copy that as well as straight to the login components and then below the inputs tag I'm just gonna paste that in and as well as the form control name and I'm gonna say that to password before we finally replace the register form to login form so it's going to be login form so I'm Gonna Save and then we need to pass in the disabled attributes and I'm gonna say login form dot in valid so if the login form does invalid disable the button so I'm gonna head straight to the login components and see if the warning works for the fields so try to enter a wrong email address try to enter a wrong password format get the error message and set this up to seven and the steps you have at gmail.com so cool with this we are done with the validations for the form and I think the last thing we need to do is just to create the functions for the old service that is the sign up and sign in functions and then consume it in our login and register form so quickly I head straight to the service file so I'm gonna go to super.savvy.cs file and the first thing we need to do is to create the variable for the super based clients we need to import this as well so let me just create a private variable because we don't intend to use this variable outside of this component so I'm just going to say Super Bass underscore clients and then code is super base client we need to import this from Super Bass Force like super bass Dash JS so the reason why we have this one is because we've not used this particular variable we need to use it so the arrow disappears So within the Constructor I'm gonna reference the supervised claim so I'm gonna say this dot Super Bass underscore client is equals to create clients and then we're going to open a bracket and I'm going to pass in two variables the Super Bass URL as well as the super bass key those are the two things we imported from our super based dashboard that is the URL and the key it's needed in this service so to do that I'm just gonna say environments which we need to import as well the superbase dot URL as well as environment.suberbase dot key so let's quickly import the environment which we have in fact but I think we didn't import it properly it's supposed to be import environment from src4 slash environments for slash environments dot development because we have it in the dev environment so supposed to be dot environment we need to import the create client as well so let me do that for some reason intellisense doesn't want me to do that so I just copy that and then paste it within the super based Imports objects so that's that's about that so with that we can I'll create this register and the login function so the first function is going to decode register Force register an account so I'm just gonna say sign up and then it requires to field the email and the password so I'm just gonna say email which is type of string and then I'm gonna return this dot Super Bass underscore client.ots DOT sign up which is for the email and then the password so this is the function to register a new account in supervised and then to login I'm just gonna say sign in and then it requires the email as well as the password as well and then below that we need to return these dots Super Bass dot odds dots instead of sign in we're gonna use sign in with password so this is the method we're gonna use to sign into our account once it's created so these are the two functions we need to create for us to be authenticated into the dashboard of our application so all we need to do next is just to consume this to sign in and sign up function in our register and login component so quickly let's head over to the Cs files of this project so the first one we're going to start up with is the register component.ts file so obviously we need a submit function to do that so let's create the submit function by saying probably on submits and then we open a brackets and within this function I can just say this before I proceed we need to inject the angular service that is the super based service right here so within the Constructor I'm gonna say private Lots and then I think we call the service Super Service so I need to import this super service in this particular file as you can see right here we've been able to import the super service from our service file so all I need to do is just to say this dots odds DOT sign up which is what we call the method to sign up that is registered for a new user so I want to open a parenthesis and we need to register the so we need to reference the form so to do that I'm just going to say this dots registerform dot email which is the first field we need and then we need the password as well so I'm just gonna say these dots registerform dot password okay within pass in the value it's supposed to be register form dot value dot email and then registerform dot value dot password so that's all so it returns a promise which we need to chain two using the dot then keyword so I'm just gonna say dot then and then I'm gonna say rest and then make use of the fat Arrow let's first of all console log rest and then if there is an error I can just catch the error making use of the catch keywords passing the arrow and then console lock the arrow so I'm going to save this and then within our HTML file I'm gonna create the NG submit event handler so I'm just gonna say NG so mix is equals to name of our function which you call down submit and with that the configuration for our submit function is complete so I'm just gonna save everything we've done and then open up the browser head straight to the register component for this I'm going to open up the console to test things out and before I test this out I'm going to open the supervised dashboard and under authentication I'm going to click the sidebar for authentication you can see it says no users in your projects yet we don't have any users yet so I don't want to use my own email so I want to use the test email address so we can use this service for that a fake email generator so I can just use temp mail for that so I'm just going to type in tempmail.org in the browser and it's going to try to verify if you are not a robot or not once that is done it's going to generate a temporary mail for us which we're going to use to test out this service so I'm going to copy this email address here straight to the register form and then paste in the email address enter a password and then click on register so we get a response which contains an objects a data object which says the role is authenticated then the name of the email which this means that our service is correct but we need to um confirm this particular user in our email or else we'll not be able to log in for instance if I refresh this dashboard you can see it says waiting for verification if we try to sign in that is if I head to the login form which we have not integrated yet so let me quickly do that so what I'm going to do is I'm just going to grab this NG submits event handler Edge to the login HTML components so I'm gonna paste it in in the form it's going to be called unsubmit as well so I'm gonna save it and then I'm going to head back to the register component CS file and I'm going to grab everything inside of this on submit function and then make minimal changes in it in the login component CS file so we can just paste it right below here so the only thing that needs to change here is instead of DOT sign up we're going to call this dot alt dot in fact we won't get in 30 cents because we haven't imported uh service in the Constructor so quickly I'm just going to do that by saying private Hots so it's going to be super service right so we need to import it so when I say this dot alt dots then we have the intellisense to choose between sign up and signing for this time around we need sign in so this dot order sign in instead of register form for this part we have login from so change that to login form the arrow disappears that's all we need to do save everything and then I can head back to the browser and our compilation is successful so if I try to log in with that same email address by adding to the login page so if I paste in the email address and I'm typing the password will get an error message because we haven't verified our user you see it says there is an arrow that says user is null and then the session is no the reason for this is it says email not confirmed ideally you want to display this on the phone somewhere on the phone but for this tutorial I'm not going to do that you can always do that on your own so to verify the email to confirm the email we need to add straight to Temp mail and then you can see the email we received so we need to confirm our sign up so quickly once I click on the email and then we can see the email details and I click on confirm your email the email gets confirmed and then we'll be able to have access to the dashboard if you sign in successfully you get out there to the dashboard we can do that um very soon by routing the user to the dashboard if the login is successful so to do that I can just head straight to our submit function and below the console.log rest I can just say if res dot data dot user dot rule is equals to authenticate authenticated then we can just do this dot router which we need to import as well this Dot router.navigates and then code the dashboard Parts which is for slash dashboard that's all we need to do so we need to import the router so I'm just going to go above here and within the Imports array I can just say router module which is important from the angular router and then we need to inject it in our construction as well so I just see private router and then code the router which we need to import as well from angular router so that fixed the error for the router so to get rid of this warning we can just add an initializer to our user by making sure it's not known by default you can just put in an initializer right there and it gets rid of the warning flag so we're gonna test this out in the login components to see if you can log in this time around so I'm just going to copy this particular part of the code edge logincomponent.cs file oh when the login.ts file so that's good so we can just test this out but before we do I want to head straight to the dashboard of the super base and let's refresh and see if our user has been authenticated as you can see we no longer have that warning message that we need to verify our user it shows the last signing date the created dates the provider which is email as well as the UI ID so let's try to log in once more I'm going to paste in that email address and then enter the password and then click on login as you can see we get navigated to our dashboard which is beautiful so with this we're able to create authentication making use of angular system as well as Super Bass so you can add more features to this application by adding the auth cards and angular like the connectivity guards to determine when the user is logged in or not but for this video I won't do that I'll do that in later videos so I think that's all for this video one more thing I would like to show us about Super Bass is it automatically sets the user objects in the local storage so once I click on application I check local storage you can see it contains configurations for the access token the expiration the refresh token the token type all this you can use to configure the authentication for your app and the authorization for your app however you want so it's a really beautiful service and I hope to create more tutorials on Super Bass in the future using angular using reacts and other front-end Frameworks but for today I think this is where I stop if you have any questions do drop it in the comment section below and I'll be sure to answer so thank you very much for watching and I'll see you again in the next one

Channel: The Code Angle

Views: 2,253

Keywords: How to Add Authentication to an Angular 16 App with Supabase, authentication in angular 16, authentication in angular 16 using supabase, angular 16 and supase tutorial, angular 16 authentication, supabase angular, supabase auth angular, angular 16, angular 16 tutorial, supabase tutorial, supabase auth, javascript, typescript, angular tutorial for beginners, angular tutorial, angular lazy loading, angular lazy loading components, angular lazy loading modules, angular and chatgpt

Id: hPI8OegHPYc

Length: 51min 43sec (3103 seconds)

Published: Thu Jun 08 2023