Angular 10 Tutorial: Oauth2 Login and Refresh Token

welcome back today we're gonna show you a comprehensive step-by-step angular 10 tutorial on implementing while through login and refresh token in front-end web app we will use our existing non-express postgresql oil software as the backend you can get the full tutorial and the source code for the back end right here this tutorial divided into several steps step number one create an angular 10 application step number two edit token and api surface step number three at angular http interceptor step number four at angular 10 routing and navigation step number five implementing login register and secure page step number six run and test angular 10 oauth login and refresh token the scanner rule for this tutorial is very simple new users register to the angular application using username password and name the registered user login to the angular app to get an access token and refresh token the access token and refresh token save to the local storage every request to the secure endpoints from the secure or guarded page should contain a valid access token the following tools frameworks and modules are required for this tutorial node.js angular10 angular cli node express postgresql postgresql server terminal or node command line ide or text editor assume that you have installed the latest recommended node.js on your computer by type these commands in the terminal or node's command line that's all nodes an npm fortunes let's get started with the main steps step number one create an angular 10 application creating an angular 10 applications we will use angular cli the angular cli is a command lines interface tool that used to initialize develop scaffold and maintain angular applications directly from the terminal or cmd to install the angular cli take this command from the terminal and or cmd now we can create a new angular 10 applications by type this command if you get these questions just choose y and sjss next go to the newly created angular 10 applications then check it by running the applications for the first time open the browser then go to localhost 4200 and you will see this standard angular welcome page step number two add token and api service we will do any token crud operations in surface also recipe operation in different surface for that generate these surfaces using angular cli open this angular 10 projects using your ide or text editor when opening edit is rc app token services ts the net is constant variables after the imports at this token crude operations functions after the constructor function for accessing rest api we will use the built-in angular 10 feature http clients module opening edit is rc app app module ts the nedis http clients module to the ng module imports array don't forget to import this module next open an edit is rc app auth service tns then declare the required wealth clients and secrets and rest api url as the constant variable also error constant variables that contains the headers for the form data and basic authorizations that converts oauth to client and secret to the basic world token declare the required variable at the top of the body class add the functions that handle error response and log message before the constructor inject the http clients and token surface to the constructor add the required api calls after the constructor step number three add angular http interceptor now we need to add an angular http interceptor that intercepts the request and response from the rest api calls create a new file it's rc app auth interceptor ts then add these imports to that file add injectable class that implements the http interceptor add a constructor with future auth surface and so can surface parameters add these intercept functions after the constructor if there's a token available the request will intercept by headers that contains all four decisions with peer and token value and application json as content type if you successful response will catch and fill in the constant log and every error that come from the response we cut and specify if the error status is 401 and specified again if the error error error is in fully token value so that will be recall the out surface refresh token functions to get a new token otherwise this router will navigate to the login page register which created auth interceptor class to the app module ts inside the profilers array don't forget to add imports step number four add angular 10 routing and navigation as you see in the previous angular creations they are also creating a routing so we have just need to modify the current generated routing to the add the coded or secured roads before modifying the angular routing and these required components by check these commands those commands will generate all required files ts html htss for the required components they also add it to the src app app module ts now we can open edit src app uploading modules ts then modify the blank roads array to be like this as you can see there is an off guard parameter for the secure routes we can close this module later also redirects to the not phone page if navigates to the page other than registered roads using the right ide it will import components automatically by typing the component name or you can import the components manually along with outguard module next generate the oauth guard modules by type this command the tools can activate same as the secure roads parameter open and edit this rcf off guard cs then injects all surface token surface and rotor to the constructor modify the connective effects functions to be like this add functions to check if the user login or not step number five implementing login register and secure page we will use angular material to build ui or ux for this secure angular 10 and all applications first installer requires angular modules and schematics if there are questions like below just use default answer we will register all required angular 10 material components or modules to src app and module ts then add these required imports of angular material components forms and reactive form modules register ros modules to ng modules imports next open and edit is rc app login login component cs then add these imports add a class that implements a row state mature before the its components modify a components to use same scss file app component stss it all requires variables before the constructor inject the old surface router and form builder to the constructor build the form group inside the engine in its function add the functions to submit the login form that submit functions will call the login functions for the health service then navigate to the secure page on successful login or prints to error to console if api calls error next opening edits is rc app login login component html they replace the default assignment templates with this angular material template that contains the login form components next open an edit is rcap register register component cs then replace the imports with this add a class that implements a row statement before the components modify components to use the same as css file app component and sdss it all requires four hours before the constructor inject the old surface rotor and foam blender to the constructor create the form group inside the engine init function add the functions to submit the login form the submit function will call the register function from our service the navigate to the login page on successful registration or print the console log error if api calls error next open an edit is rlc app register register component html will reverse the default cma templates with this angular material template that contains the register form components next open an edit is rlc app secure sacral component cs and replace all type scripts called this the angular secret components load or secure rest api endpoints if not authorized it will redirect to the login page next opponent edits src app secure cycle component html then replace all html code with this as you see in the previous word questions there's a not phone components we just need to modify the html file it's rc app not for not phone component html then repairs or html tags with this and forget don't forget to modify the note 4 note phone components cs then modify the style urls to point to app component sjss finally we need to modify the defaults src app app component html with this also the srcf app component css not used by other components too step number six run and test angular 10 or auth2 login and refresh token to make this angular 10 or health application working first run postgresql software on your machines and then run the express our postgre application next one regular 10 applications in another terminal tab we have this error duplicate identifier not phone components in app module ts and here we go the full angular 10 and all this application that is the angular 10 tutorial of to login and refresh token you can get the full source code and article link in the description below thank you

Channel: Djamware Tutorial

Views: 7,844

Rating: 4.5348835 out of 5

Keywords: angular, angular10, angular10tutorial, oauth2, token, refreshtoken

Id: 3tms-HM4NEE

Length: 28min 20sec (1700 seconds)

Published: Sun Oct 25 2020

Reddit Comments

[u/santhastyle]

I'm not security expert but I don't think this tutorial is legitimate. You are not supposed to use refresh tokend together with SPA client. Nor refresh token nor client secret can be stored securely in the browser. Usually only access token (auth code grant type) is provided and fresh token is obtained by auth server cookie session.

[u/pateriaashish1]

Don’t want to demotivate. It was really tough to follow you. Audio is not very clear. Silence through out the video. Not descriptive enough. Content is good though.