🔴 Role-based access control in Angular & Node

[Music] hello hello can you can you hear me are we live hey guys can you type in the chat i'm gonna check it out also on my phone hi yes hello hello everyone how are you today we are going to spend a very fruitful hour together can you just shout out where are you connecting from where do we have people i will try to make some kind of double sound so you hear double sound can you say if there's a problem with sound italy we have anna from italy we have vladimir from israel we have paul from chicago pakistan hello hello mikhail from ukraine hello forrest from greece hello joseph joseph uh yeah you want to see the webinar again joseph nice to see you again uh canada no sound problems thanks uh germany ramis from usa okay guys that's amazing that we have so many people here um and let's let's just start because uh time is precious if somebody is late that's not our problem you are here uh on time so i'm just gonna head over to to the presentation so now please confirm that you can see the first slide with role based auf in angular and note free workshop i'm going to look at the phone yes yes seeing the first slide plus one plus one wow friends portugal guys yes amazing so um plus one plus one over 100 people online so matt payne yep great so i'm switching my tab so officially i would like to welcome you at this webinar we are going to spend at least one hour together and we're going to see how we can design and implement role-based authentication and authorization in angular and node as a full stack solution so i can see that on the phone that double checking that everything is okay so the plan for today we're going to first discuss the case of role-based application uh how we actually can look at domain modeling for multi-user account system because what are what we want to do is to have a single account and multiple users attached to this account with the different permissions uh managing those permissions designing a secure rest api for roles introducing user of object leveraging router guards http interceptors and middlewares we are going to see how we can easily create conditional components visibility in angular some bonus module failed login throttling because we are focusing on security when then we will see a real live demo and i will talk a little bit about web security academy program we will have also a competition to win this cup i promised you uh maybe i will switch a little bit now the screen so that you can see we have a giveaway this uh ninja security cup so we have couple of them actually to give away and uh i told you that i came up with the idea with the instagram uh with an instagram competition so guys if you uh if you go to my instagram i'm not an instagram guy you know i have just like over 100 followers so i'm not the instagram guy but i just wanted to make fun a little bit and so if you guys go to instagram.com slash bartos underscore io follow my account and like the first post the most up-to-date up-to-date post with this cup with this cup and tuck one of your friends i'm gonna pick a winner and i will ship this cup to the winner supposingly that you give me your shipping address so uh go to instagram find the first most recent image or picture i'm not an instagram guy follow my account and tag your friend in this in this uh picture and there is going to be a lucky winner who would receive this cup for free shipped directly to that person who wins oh we have a few people who want to get the cup so basically it's just i'm not an instagram guy i don't know how to do this stuff you will see i have a little bit more than 100 followers but if you follow me if you attack your friend in the image and like the image we are going to pick a winner who receives this cup for free okay um so the competition is happening during this this webinar we are back we are back to the presentation and yes we'll pick a winner and we'll have a q a session so yeah just a reminder you have to stay till the end to win the cup because we'll pick the winner live before we talk about um the contents of this presentation for those who have not met me before my name is bartos petruja i'm a web security academy founder and deaf academy founder i started my online presence with angular academy but now since i want to focus more on more generic content angular academy was migrated to deaf academy i hold a master degree in computer science back in the days when it was possible i was speaking at conferences like angular app ngy kings ng colombia.js conf i was working for many years in the different companies like credit suisse ubs f-secure techno3 building software enterprise software and since a couple of years i was teaching hundreds of developers via different workshops meetups and conferences so i'm not saying it to brag i'm saying it just to get a little bit of authority in your eyes um to make uh this impression that this is the guy that is worth to listen to if you spend this time with me so hopefully i will be able to teach you something um now switching the slide a couple of pictures from the past some angular workshops some conferences some meet-ups uh just to give it a proof um and the final proof maybe just to get this a little bit of authority is if you type my name bartos pietroja on google videos you would find a bunch of conferences talks recorded over the couple of last years when i was sharing my knowledge and experience on the different conferences or events so that's it i hope that i get a little bit of the proof that i'm the guy who knows a little bit of stuff to share it tonight with you or today especially depending on where you are located so we start from the simple concepts we need to the goal is to start with the simple concepts on the high level and dive deeper and deeper into more you know uh into more um hands-on in more detailed implementation uh to see different perspectives by the way um if you just give it a like to this video i would be happy because youtube would distribute this live and more people will join so if you don't mind just give it a like um that would be nice if youtube sees that this is a nice meeting and more people will join so uh introducing those concepts when we talk about authentication in in it systems we would like to prove one's identity whether if it's with login and password or iris scan or fingerprint scan on any or maybe one time password in id system we want to prove our identity or once user wants to use the system the user proves his identity and then there is a process of authorization the system says okay i know who that person is and now we need to determine if there is a proper permission to execute some action in this uh system so how usually it looks when we think about web applications we have angular on the front end and note on the back end but those concepts are fairly general you can implement it in barely in in mostly technologies but you know angular is our implementation example here so basically uh let's look at our diagram we have mike who is the owner of our multi-user account and we have paul who is a just just a reader we can assume that he has less rights or permissions than mike who is the owner of the account and they both authenticate in our system it's login and password but as i said authentication may happen with one time password fingerprint scan iris scan whatever and in our setup we have single page application on the front end and some back-end api after that when they want to authenticate they are going to be presented different uis we can assume that the owner would see different buttons and the reader would see different buttons for example for modification or other uh more features right now the first step they interact with the ui right so this is like the the frontend part they interact with the ui based on that based on that interfaces that they were presented but the thing is that the next step is that single page application as it will hide and show parts of the ui maybe also with lazy load parts that are not supposed to be seen by uh part some of the users when executing a request to the back end would need to attach session id or out token in the cookie or http header in order to allow api backend to authorize or not those incoming requests so this is our landscape this is what we want to see on this big picture this is the screenshot for our demo application i will also give you the links to the github when you have the full source code of the whole application but here you can see the example that we have the chrome devtools and there is some requests going and there we see in the header authorization bearer with some string this is our token here so this is the way one of the ways to uh be able to attach something that the you that the server would use to first authenticate and then authorized those requests okay before we jump into the next part maybe some some small reality check i will look at the comments and see if we all are on the same page and if we can continue just give me plus one or thumb up um i have some delay i will look at instagram and here in the chat i will see your plus one then i would assume that we can continue give me plus one if we can continue yes i can see plus one i can see plus one that's great uh so the next idea is domain modeling for multi-user account system so we know this high level we see this high level we have some idea of what is this all about but how do we domain how do we model our domain for this multi-user account that there are some entities and we want to restrict the permissions so we will have our central point which is an account with the given id so that it is identifiable and then we can attach multiple users with their own id and account id that points to the account that they are attached to and their login and the role in our simple example we have owner and reader and on the right side here you can see entity this entity may be anything in your system in our application it would be expense budget or category that is attached to the given account but most importantly it has to have the id and account id that is allowing this entity to be attached to the given account in this approach we can achieve the idea that was presented previously that we have multi-user accounts so that there are multiple user with a given account and this account holds some entities a small trick if you are guys angular and node developers there is nice trick when you use um when you use typescript that you can share a single domain object simple domain class in your front and your back end because when i was working as a java developer this was always a pain to sync the domain models between front end that was totally separate application in the back end every single property change requires synchronization but if you use angular when you type script and node you can put your models for example in our case account model account ts budget ts user ts expense ts and have them physically in node application but use typescript path to point to this um to point to this place where those models are living with paths and then use models and then use this relative path uh and then once you do this in angular on the bottom you see you can you could import for example budget summary from uh here there is this here's models slash budget summary probably there's some overlay here but it's written here models slash budget summary because it will trying to look under models slash and look for a budget summary and this way when you have those backend application it will own these files but one but once you build angular it will pull those files and include in the build so you would be able not to uh have done them like literally dublicated during the development but only in one place during the development and during the production build they will be pulled by typescript so i find it a nice trick in this concept let me know if you if you if you like this idea with the plus or you knew about it or or didn't know about it just i will look at the comments and maybe reply later on if if it's in the flow of this presentation but for now we continue we have we have a lot of to cover and very little time um the question is now we see the high-level picture we see uh the domain model now how we actually from the logical perspective wanna manage those permissions so here i wanna i wanna um ask you a couple of questions when we as the designers or architectures of this application would need to answer uh here we assume that the user is authenticated now we are in this process of authorization and the question is does the entity belong the user account does the user have the proper role are there any other rules in our permission like policy we have comments looks nice but i didn't work with node plus one sounds good where we started data great uh we will have a whole bunch of questions and a very long time for a q a session uh i just want to convey as much value right now and then we will come back to the questions and let's start with the first question does the entity belong to user account so we have a user we have the account and we have facebook post or budget or like expense in our case and from from this like logical point of view if a user has id a and the account id b request an entity belonging to account with account c only if b equals c will respond with http okay sending the entity else http unauthorized right because anybody can craft http request with any frontend client our angular application or react application can be totally compromised and we can craft our requests in any way so on the back end we need to check if id uh from the user an account id b um actually equals c so that this there is this link this is the user who is actually linked this account because we can craft the request trying to maybe read maybe manipulate somebody's else's accounts entity our back-end must take into consideration this case right so this is one of those uh vectors of authorization we are going to be checking it on the back end with proper checks the second question is does the user have a reader or owner role let's assume that the reader can only read owner can create read update or delete we don't want to make it possible for the reader to delete some entity right for example delete a budget in the budget application or an expense so there's a coming request we are now we are talking about the back-end perspective right so how do we what what are in general those those vectors of authorization in our case and if the user has rolex but requests to edit the entity so in our case the idea is okay if x equals owner then we say http okay we allow we authorize this request because this is assumption that this is authenticated route now we need to authorize and then we send http okay to the to the to the front end in other case if those roles check is not fulfilled fulfilled then we say http unauthorized from the backend perspective yeah it's an authorization i i i told you that uh cloud you says uh this looks more like an authorization so we assume here that this is um coming from the request who is authenticated so we talk about vectors of authorization are there any other rules can you come up with the idea for example uh when you can share those entities between accounts for example a user can request entities belonging to another user accounts like in blog posts or facebook you can read someone else's post you can like someone else's comment so this is yet another consideration when we will be implementing this um when we will be implementing those checks against vectors of our authorization what we need to think about in order to make it secure the next idea the next idea is about designing a secure rest api for roles having in mind all those ideas because not every time we want to require this authorization so when can we not require for example when we want to log in or sign up right so what i can propose to you is to have those distinct parts of your application reflected in rest api design to make it easier to maintain so for example let's look at the left side when we don't when we we will not require this authorization checks api.com auf login or auf sign up so everything that is in auf we know that this requires this first step of authentication and we will not require to check additional authorization but on the other side api.com up would be our place where we would place everything that we would like to secure that requires authorized requests let's call it a danger zone right so on the back on the on the bottom you see app.api.com slash up wildcard so here you can see get put delete up entity and id so here we would definitely everything after up would require our guards our checks to be fired but on the left side you see those parts we which we not need to have this uh have this uh authorization logic fired the next idea that would fit as a puzzle in this whole landscape uh is user of object we i see that there are some questions regarding uh the roles if it's in in jwt or if it's in the different place it depends which mechanism you use so if you use uh session cookies this role would live on the back end but would be conveyed back to the front end in so called user of object but if you use uh json web token it might be conveyed inside of this token right so depending on depending on the mechanism we will see also what are those differences but for example when you use cookies you would give back this user of object to the front end so that it would adapt to see to hide or or or show particular ui elements but if you use token it may be baked in the token and what it will be this this this thing it may be a role right actually in our case it must be a role and the user id so that the front end would actually adapt here for example for the paul who is just the reader we would model those things maybe in the user of object maybe in our token if we use uh for example json tokens because we have different many tokens but if you really don't have this token we will just create this object on the back end and send back to the front end so yes and probably maybe just leave your comments please and i promise i would answer all of them during the q a session i don't want to just break the flow and depending on the mechanism server will start a session when we think about state full approach or generate a stateless token as i explained just a second ago so so we see more or more of our landscape now let's let's drive a little bit towards front end we use angular on this front end so how we can protect angular routes from unauthorized viewing right so we know this we know this role we conveyed it either in the token either in the user of object and front-end application knows actually that this is for example the reader so we will we can use as simply as router guards to depending on the url load proper components right so for example when you have login then we will render login component thanks to proper routing configuration but then once the user logs in for example the application shows up entities by the way on the front end we can use exactly same pattern for um these um urls for the secured part that requires for example in this case router guards which are just um the the ui part which is not any guarantee of security in our application i will explain you why later on but we can have this app and slash entities and the the application would render entities and we and have those guards that would check for example can we activate this route and render this component based on this knowledge that was conveyed inside this user of object for example a role and even if user manually types this protected url this should work if we properly use router guards in angular and here's the here's the thing front end can always be read by downloading and inspecting those js files and you can you have to always assume that frontend is compromised because i can take any client and craft the request and totally bypass the frontend part right so if you want to present some sensitive data you for example like sensitive uh data list inside of the drop down it's not enough to hide it aft behind the router guard you have to secure behind the secured api that requires authorization right for example you can select option can easily select options can easily be read even if you use router guard because i can download this package and inspect the contents so you need to require proper checks on the backend and hide those sensitive data so router guards are cool but they are not any means of securing the the application so um just a small um intro how we use routing in app routing module we can have our login part and this app part and then we use can activate can load up guard and we have this layout component that have has children but we have only one up guard on the top of this up danger zone the secured part then we have bunch of application uh application related components but if we use layout component on up path and then use proper guards then we don't have to worry about them in more low components that are used as children to this um to this to this route right uh and this off guard in order to know if uh the particular component or route can be allowed it can just call our service and ask is logged in because in this case we don't check the ah because auf guard is going to determine let's go back for a second we have the login path which is guarded by aufguard because if we are logged in already we probably don't want to show the login page again and we would like to redirect but to some default view so for example we can check if we are logged in then we are navigating if somebody actually tries to go to the login page being logged in we would navigate him to initial page right it may be some dashboard or whatever if we have then other case we would just reply hey you can log you can show this path only if and we have the negation here not is logged in from our service and this up guard would have totally opposite condition uh for example we also use can load to not lazy load those parts that would probably not be could have not been authorized to be load so in can activate we just wrote to can load and here we have totally opposite condition if you are not logged in redirect to login if you are logged in just return it's okay you can continue to open the rest part of the application if you want it's not the way of uh it's just saying that i have a very uh detailed explanation of angular router from uh one of the conference in israel angular app from three years ago if you just google bartosz petrucca angular router probably the first one would explain like the whole conference talk about angular router just to let you know uh the next idea we are putting more puzzles in our landscape of this role-based authorization system http interceptor and now if we use cookies because we can use different mechanisms right both mechanisms are applicable in different scenarios cookies are good for example in one approach json web tokens are good in different approach um we can discuss this later on but this is not the case on this slide here when we use tokens we don't want to manually add these tokens every time we request something which requires authorization we can use http interceptor which coming from angular the request coming out from from angular would have this proper token attached to the request so here we have method intercept and every request coming in we'll check if we have uh talk and available then we will attach this token and continue with the next action in the chain because interceptors are like a chains that invoke each other because we can have multiple interceptors and this is a chain that invokes one element after another uh so we continue uh that we can add the token automatically with hdb interceptor and this is from from the frontend perspective right this is from the frontend perspective from the backend perspective we can do similar thing we want to check in some more clean way those authorization rules that we learned in the previous slides and in this case you can think of uh express js middle where we use node we use express.js which is like a framework for making those uh rest api a little bit easier to develop and you can say that this angular interceptor is somewhat way logically similar to express js middleware we are going to run them uh in everything that is after up uh url so this is our again dangerous that we are going to protect it this is a very similar concept so in this case for example let's think of about our example with budgets and expenses we have for example expenses and we need that case we want to check the role and the question is does the user have the raw reader role because reader only reads we'll see the details but here we just attach to the route some checks and here we have a different vector of authorization we have put in this case we want to edit the expense of the given id so does this entity does this expense belongs to the user's account so we just attach this check and on this level when we design this rest api we delegate it to the proper middlewares and how this middlework may look like it works in a similar fashion it's just a chain of functions that invoke each other one after another having this request object so we take this we return these functions that re that accepts request response and the next function because we need to call next once we as once we check everything so we get the user we get expense id and we ask expense repository give me please this expense with this expense id once once we have this expense we are going to check account id from this expense if it matches with the user's account id if they match we are good to go we call next there might be some other middleware to evoke but if it's not uh matching we say sorry um response status 403 json you are not authorized to perform this operation this is going to happen on the back end right so this is one of the one of those permission checks uh wow guys uh do you have any questions up until now i'm gonna just take one breath uh to get my focus back uh see if we have some um questions up until now and i will look at instagram you guys really want this cup you guys really want this cup we are going to find a winner soon pretty good slime oh maybe i will do this like this wow so many comments paul says that was excellent i just learned so much thank you pretty good slides um which is better mikhailo nothing is better they are both applicable in different scenarios when you have a single domain with the same origin definitely cookies are your way to go but when we think about modern applications when there are different services on the different domains and there is single poly single i'm sorry same origin policy that would make it impossible for you to use cookies and then you would have to use json web tokens when you have different services on the different domains on the totally different places and same origin policy is number one or security means in the modern web that would break it or make it so depending on your idea or on your landscape you would use json tokens or cookies okay let's continue we will have also i i just needed to get some brief you know guys to continue with the slides because we will also have a lot of time on the q a session but here i want to i want to show you something which i call conditional components visibility so once we have all those things put together that we learned before we want to have a smart way of showing particular ui parts for example on the right side you see that john is locked in and john is a owner and he can add new expenses so basically every time what you want to do you want to render the ui you do ngev and ask for the role and so on and so on what i propose to you is what is your instagram account you want to win the cup you are welcome my friend you can go to this instagram you know the rules follow like the the image of the with the cup and tag your friend and we'll find the winner so coming back to this slide i don't want to every time run all these checks to see if john can see the plus button right so i i want to write a directive which i call four roles directive that is going to check if that user has the role that is inside of the roles that this ui element is designed for so if you look on the right side i have button and i have structural directive for roles and i have owner it means that only owner can have this button rendered so what i would do in for rose directive i would somehow manipulate this list to have this properly prepared and then i would ask of service get user role subscribe and check if the user who is currently logged in and the role that is attached to that person is inside of those allowed roles and in this case if it's uh there i would create and render this view otherwise i would clear this part uh from the ui so i would write this once and then whenever i wanna have this conditional components visibility i will attach four roles directive and list the roles that i wanna allow the renderer to place on this template how do you find this this have you ever seen this approach with uh because what do you would do you would definitely you would normally need to check do some nges and so on and so on here we are just wrapping this repetitive stuff and in creating structural directive let me know in the comments if you have seen this if it's useful if it's not useful um i'm gonna i wanted to sip water but i just learned that this is empty so i don't have water but at least we have some time to look at the comments that is really cool thank you cloud you um i also find it really nice because it's is the idea of reusing already written code rather than just having the spaghetti every time on the template anna says very good definitely using a directive is much cleaner great guys i love this tool that allows me to show the comments it makes me feel that i'm not alone i can just i can just show a couple of your comments patrick says agreed welcome patrick so basically this tool makes me feel that i'm not that um alone because you guys are all around the world over 100 people uh so thank you good vibes okay uh let's continue let's continue and here's the here's the bonus right um i told you that we are because we have uh learned a lot of a lot of pieces that when we put together in your app you can see the source code of the whole app after the presentation uh will have fairly stable and secure system but here i want to show you a couple of other ideas for example when you have those brute force bad guys who are trying to guess the password every possible character uh combination or they have some dictionary and what we want to do in our system is after let's say three failed uh logins want to block the user for a given of time let's say 10 minutes and present to him or to her you cannot log in you have to wait 10 minutes and after this 10 minutes we will allow again so how can we easily actually implement in our system so here on the right side you see if i type if i type too many times the wrong password i would be blocked so what i propose is so-called login throttler this login throttler is going to be implemented on our back-end and when we we we need to bake this throttler in our login logic so whenever we know who is trying to log in we ask the login throttler because the login throttle would remember who is blocked is this login blocked providing the email of the person who is trying to log in if it's blocked if it's if it's not blocked if it's blocked we say okay there's the game over we throw exception please try again you are not allowed to log in but in case it's not yet blocked we would compare the passwords if they match we okay for example return json web token if we use json tokens we say login successful but in case of login failure if those passwords don't much we bump our login throttler with one more failure we say login throttler register login failure for that email and reject the promise right so here we just bake in this login throttler and in case of login failure we want to bump the counter saying register login failure for that email so this would how we can change a little bit of our login two step verification is something different but the login throttler would have two input parameters max failures in our case is free and time window how long should we suppress the login so uh we have two two methods like is login blocked and registered login failure is login blocked is supposed to give us an answer can we is this user with the given email now suppressed from logging in so we'll get login failures get last failures and we have three last failures and then we say if the number of failures is greater than the possible max failures in these inputs uh what we are going to do we are going to check the time here is some magic in the time but you can see it in the in the um source code we are we are checking how long ago was the last failed login if it was longer than 10 minutes as if we have in our uh setup we can say okay you can log in but if it was during the last 10 minutes you are still uh and the number of failures is more than allowed once you are still blocked right we say resolve false right and then register login failure it just it just takes the user email and says we at this point in time with this new date this user email should be considered as failed login trial and this is just some database right because some uh oh we can have this inside of any database it can be sql no sql i don't know what is on their back end but login failures can host this state of this list of user emails used to login but failed and the date and if you implement it this way you can have very robust but simple solution to implement login throttler patrick mullet yes where is this where do you store the state i have you can see that there is login failures from this login throttler i don't care i have this login failures and i expect it to get last failures and register failed login with those parameters right i and at this point of abstraction i expect to have login failures with get lost failures to retrieve it and register failed login for the given user email and this current date right so um you can probably implement login failures with some database it's up to you at least if you provide me with some state of this throttler patrick does it answer your question because here we think about this logic of this throttler not how we store it in the database it's on the different level of abstraction patrick says got it so we can continue um my friends demo time i will make an impression that i'm drinking some water because i feel like i need it but it's empty this is this could be yours oh let's look at the comments you guys are crazy for this cup you one of you will receive it oh let's try to look at the demo now i need to switch a little bit my my slides so hi how do you like it so far guys we have over 100 people still with us almost an hour and if you're still with us it means we are learning some cool stuff give me some thumb up if you like it uh so that i feel like i'm doing some good job in the meantime i would try to switch the screen with the demo wow wow you are doing great thank you i have no i'm really sorry uh i cannot read russian letters i have no idea how to say your name i'm sorry but thank you for your warm comment i i really wished i knew how to pronunciate your name but i wanna i don't wanna offend you so [Music] thank you for such a uh nice uh comments or well explained thank you sidra um please share a real code example i will send you the link to the github repo with everything that we learned implemented but even more um thank you for the great stuff from pakistan thank you igor it's igor nice to meet you igor so probably now i can see how to pronunciate this n can you see the demo uh with the login with login with github login with google sign up get identity fabian so so let me try to log into our budget application to see how it works my friends i'm going to try to log in as bartos at up com123 and it says go factor authentication so it requires me to look at the google authenticator and type in the code i have it properly set up and now i'm opening google authenticator i'm going to type in the security code which is one time password just for me it's uh you can see this call because it's one time password and valid only for 30 seconds okay i uh it says something uh because it's on localhost we don't have to worry about those uh because google chrome thinks that there's a bridge but it's a local host and this is not any real issue so what i did i requested a login but because of this user profile having having uh double uh two-factor authentication with google authenticator um toggle it on it on the back-end side there's a proper code that would request a one-time password that is valid only for 30 seconds and it's just for me and now you see that i am logged in i have these expenses i am the owner of this account i have settings um here let's try to log in and use john up home one two three this account has not uh two factor authentication enabled we can go to settings and we can see two factor authentication is disabled and now we can see that we have two expense two expenses in the category it's cinemax kfc i'm the owner and i can edit i can delete it and now i would log in to this account as a mic role my a mic user profile to be more precise in our terminology which is uh linked to the same account but there are no those elements for edit because mike is just a reader how can how can i know that because if i go to user settings i see user accounts i can i can see john who is the owner i can see mike who is the reader that is attached to this the same account so i go to login page again type mic at upcom and login now i see the same entities the same budget category the same expenses but i cannot edit i cannot delete it and if i if i even if i tried to fake the front end in this way that those buttons would create it would be available to click or i would use postman or i would write my own front end and create a request to delete update or um or modify there are proper checks implemented that will prevent this person to do this because the role is not proper for that kind of operation so uh here this is this application this is the application and now let me let me give you the the links to the or maybe later i will give you the links to the whole source code with angular in in node uh there are a bunch of different features like logging with google login with github get identity from uh google with implicit flow uh those google authenticator implemented this with those one-time passwords with two-factor authentication on the front and on the back-end sign-up feature with confirmation password recovery everything is implemented there and paul says extremely useful thank you very much so uh you know you can you can see from the full stack perspective how to implement on the front end those login with github login with google get uh with using implicit flow uh how to get identity there are like it's like covered from many different perspectives and uh you there's also a sign up with confirmation and and also we have the integration with uh auf 0 which is like identity as a service that takes those things um on into the cloud they they they say that they are identity as a service which is like a company that provides cloud services to manage users to manage identity authentication and authorization and this has everything everything implemented so let me go back to the presentation because probably uh we have the next we have wow almost an hour guys we have uh three more parts some announcement lottery to win the cup and q a session i have long time uh to spend with you so we can have very long q a session but i say that there are three parts now uh i'm switching uh to the presentation to show you the slides and here guys matt i will share with you the github repo did you enjoy the whole we spent almost one hour just playing around some cool stuff the simple question did you enjoy it how do you find it just give me some feedback i will again assume that i have some water i should have the water here i would drink later just how how as the whole this this thing this application this concepts this mechanisms how did you like it just just tell me i'm gonna look at the comments there's a delay um i don't know how long the delay is but at least there was no crash because sometimes when i do the workshop online i suddenly got a crush of really good i also checked your website really good stuff thank you this was very useful useful excellent bartosz thanks stanislav thank you very much so what i want to talk to you because we have not even scratched the surface this is very complex world of web security everything around and what i want to say to you i invite you to join me because we start the program which is called web security academy 12 week to learn everything about web security full stack web security implement this with me like with hands-on every feature to have secure role-based enterprise-based authorization and we will put on top of that open id connect google authenticator will put off zero integration and tons of different modules bonuses in this program and um web security academy is a missing element with dev web development space it fills the gaps it is divided into 12 weeks effective learning program you need about one or two hours a week to be confident about web security and provides you with most important theory so you understand stuff and coding practice it has premium life support i personally meet with students on zoom or google meet depending on our choice and also slack group close slug group where i help you with your struggles and we have this closed group uh on slack with you know all those integration with others collaboration and so on so these are the pieces of web security academy it's 100 online lessons are in the form of on-demand videos it's based on internet engineering task force standard new materials appear every week we meet online to discuss your progress uh maybe check your questions or anything you need and we have joint working group on the closed flag channel with all the members there are many people already from different editions that probably if we have still a couple of people guys if you are still with us joseph or any other person who is already in the program because this is the fourth edition there were three different editions last year and i see i saw some names in the chat that are already you guys even though they have everything explained they decided to come here and integrate and join and listen um i definitely saw joseph and couple of different names that are inside of our group slack and the program so you see that it is it is it's a proof that it is a good resource to master those topics and everything in an extremely friendly and practical fashion no bs here's the screenshot of one of our meetings we have this kind of very nice atmosphere we discuss problems we challenge ideas and this is super useful to see somebody somebody else's perspective and now just after this speech we are going to find the winner joseph joseph is uh inside of the program i didn't even ask him to say this he says yes 12 week program is very useful uh i remember joseph with your name and surname because there are a lot of people but we know each other because we meet on those uh on those sessions on slack and so on so actually actually just thank you i i didn't ask you to do this i mean this is super um super super cool from your site thank you very much um so it's not about just the knowledge knowledge is free but it's scattered it's distributed it's fuzzy in any ambiguous forms searching for it filtering organizing it takes a lot of time i'm offering you i'm off what is all about in my opinion it's all about the knowledge that is curated systematized delivered in an interesting easy digestible way a system a system an amazing community with you so you will never feel alone with the challenges during the learning process and by the end of this program you will have complete understanding of the entire web security model and fill all your knowledge gaps you will learn security vulnerabilities and industry standards prevention methods you will know how to implement ultra-secure role-based access control in a real-life application and master complexity of open id connect and be able to implement different flows when applicable in the given context because there are different uh flows in those approaches like open id connect securely let's briefly go through our program today we are in the week one the big plan week there are a couple of lessons that introduce the whole work um and we will have to not tomorrow but on friday you can go to a website later on and see the agenda on this friday we are going to meet on the first live to learn about our expectations to meet the group and start this fruitful 12 weeks then we need to talk about web security model same origin policy uh cross-origin resource sharing hash is nonsense sub-resource integrity to have this basis to jump into client versus server security we will talk about session versus token some of you were asking when where when to use tokens when to use sessions when to use cookies everything is explained with there with proof and the logic and the uh the reasoning behind it why i would recommend use tokens here why i would recommend use sessions here right so this is covered in the program security vulnerabilities all aspect top 10 cross-site scripting json web token hacking different uh vulnerabilities and then after the week four we have the meeting to sum up what we learn we will probably meet on zoom or google meet it's probably nothing that differs in those two platforms um probably good meet um and then most importantly we are in the different time zones this time uh we will have a doodle to find the day and time that fits most of you then once we have this fundamentals we will start to design our role based access control application architecture secure parts of the application to implement step-by-step those core features like login feature in angular login feature in node signup feature in angular sign up feature in node we will use router guards and http interceptors then we'll jump into client security implementation content security policy xss user of object and then week 8 api security implementation server site session login access throttling logins input sanitization and validation preventing unauthorized requests roles and account management week 9 adding a new user confirming a new user for the given account password recovery active sessions management removing logged users then to jump and have again meeting or google meet or zoom will find the time that fits most of you to just discuss the progress fi find the question answer for your questions and maybe maybe discuss your own solution i love to hear your solution i love to help you i spent the whole year creating this program and you see the people who are happy inside then once we sum up this we will jump into so-called external authentication we will start understanding all of what are the different flows what are the security measures behind all inside not behind but inside of 2.0 because 2.1 is ahead then we will use authorization code flow with pxe proof key for code exchange we will see when you we have id talk and access token then we will atta add open id connect protocol on the top of that once we have it we will use google authenticator to have two-factor authentication how to set up properly to factor authentication how to use those one-time passwords then to jump into external user management what is fade federated identity management single sign-on we'll see what are different themes what is this identity as a service and we will implement externalizations of those our features so after that we'll have another q a session but it's not enough i want to give tons of value we have amazing module about firebase security from jeff delaney from firebase fireship uh youtube channel he's super popular and he agreed to collaborate with me on that he has its own module to to show you about security in firebase super cool then we have another module gdpr and legal guide when you create systems with personal data you need to know how to deal with them what is privacy policy terms and what you must do for legal compliance it was created with a lawyer then we have the websocket security module security testing penetration testing how we can automatically try to find security vulnerabilities in our application with proper tooling then maybe in some of the future editions because this is an idea uh if you would like it recent recent security attacks debrief how recent big companies were hacked and how it could have been prevented just like and what the strategies can we use the strategies that could have been used to prevent hacks and save millions of dollars and the next module can be based on your topic i hear your voice i hear your feedback and constantly try to improve this program that's the result okay guys this is the last slide before our before our no a couple of slides more before a giveaway so what is inst insider academy 12 week learning program all the bonus modules at least q a three q a sessions live show your code show your stuff i want to help you 12 weeks of premium support during the program we can talk on slack access to the closed community of developers learning together matchmaking session on friday this friday we're going to meet on google meet this friday because we close the registration soon i will tell you when we have english captions that can be easily translated to any language after that you will have a certificate of graduation you can put it on your resume and most importantly this is why joseph is here with us you have free of charge lifetime access to the materials and future updates and additions this is lifetime deal it's priceless joseph didn't pay for the next editions he joined i don't remember in which edition but one of the previous editions and is still inside and when i add new modules when we grow the content the program you guys can benefit once you join today to this program well guys what you think should be the price how much would you pay for a guy who an expert engineer to spend an hour with you for example i mean i'm asking about the whole price the whole the whole stuff like package like the lifetime access the coaching session q a session slack support all the videos just i want to see your comments what do you think is the first price for this for this service when you are going to like have a massive investment in your skills stanislaus says 700. joseph says 300. so i would say science if you are almost hit because if we look at this if you divide the price for the week so it's just 50 dollars per week how much what would what would you spend 50 a week one hour of private lessons single tennis class or maybe one crazy night out on friday with friends when you spend a lot of money on beers on on pizza maybe this is just 50 bucks per week you can join right now and invest in your skills under web security hyphen academy.com you can pay 1 000 to me paul you can pay 1 000 up until monday tuesday wednesday thursday you can join this lifetime deal lifetime membership for 597. it's still a deal because you pay once and you have a lifetime access i actually my friend you can pay me one thousand dollars you can pay me 999 but today tomorrow and the day after tomorrow because we have two days to get most interested people meet on friday and you can join right now pay ones get a lifetime access for nine five ninety seven five hundred ninety seven which actually gives you five fifty dollars a week for twelve weeks wow i hope that i presented you how much value if somebody thinks it's it's like if you earn 60 dollars per hour let's think about 49 minutes of work to get a week to get a week of this stuff how much do you spend how much time do you spend googling learning you know struggling to implement properly everything what is more cost effective you even have more you have the system you have the community this is still of a deal and here's the landscape of our system that summarizes what you have you have this 12 weeks you have tons of bonuses and we progress week by week it is like theory and coding labs on those couple of first weeks then this you have this budget application implementation and then we when we actually plug in those external systems integration like google github google authenticator auf zero and just read what the go to the page web security i will i should have i should have done this i should have say web security dash or hyphen academy.com registration is open this is our first week which is the registration week read what others say actually to be honest joseph thank you one more time i didn't expect you to hop in and tell such a cozy and warm words i didn't expect that really but there are a couple of people who agreed to put their testimonials on on the on the website and registration closes in two days at 8 pm gmt strict because the next day we have our first live meeting so the 28th of january we close we definitely close like nobody goes inside we have the group we meet each other the next day on 29th of january and then the whole stuff the whole party begins and it lasts for many many many weeks and you have two choices you can do nothing do not risk we are good and you can take action learn a lot but risk money actually you don't risk anything because i give you 30 money 30 day money back guarantee if during the first 30 days you come to the conclusion that you know this is not to me this is not for me just write me an email just tell me what is the reason i would it would be good to tell me what is the reason i would like to know and just i will give you the money back no strings attached so let's sum up this is the last slide and we'll have the winner a 20-week learning program all the bonuses at least few three new life sessions 12 weeks of premium support access to closed community matchmaking session on friday this friday english captions that you can translate to any language certificate of graduation and the most importantly free of charge lifetime access we run this program every couple of months and right now we start edition number four so i wish i had some water but i should find a person who is going to win this cup this is the this is the end of my pitch i hope that i would be able to work with you and we are going to meet in academy but right now um by the way write a comment what do you think about this proposition and we'll give away the cup and then we will have a q a session we're going to have as much time for your questions as much time you need so i'm not the instagram guy i'm gonna look at instagram to see how can i randomly pick i maybe on my maybe on my phone i will try to randomly pick a winner and after that we give it away um but you have to be online if you are not online and you don't say it's me we will look for another person where is my instagram you guys are crazy i cannot even so many likes notifications okay i have my phone i'm gonna read the i'm gonna type the first person who i you know i'm gonna i'm gonna find it i'm gonna find that person let's i'm trying to make it like um i'm scrolling through the comments do we have oh do we have mr i'm gonna type the i'm gonna type i'm gonna type here we have mr adam tabatka yes mr adam let's look at the chat the person who took part in our in our competition contest do we have mr or he already left mr adam are you with us yes he says he's congratulations just uh send me a dm with your shipping address and i will send you where are you from i'm going to ship it from europe from poland where are you located mr adam bravo can let's congratulate mr adam where are you mr adam i know you are here can you tell us which country this cup is going to be shipped and then you send me your detailed address slovakia it's not far away from poland so it should be fairly fast delivered just give some bravo to adam by the way guys uh patrick says congrats thanks a lot guys now it's time for q a session anything that you need to know about the the the content the cons concepts that we learned about the role-based congratulations adams bravo so anything that you want to ask about um the the stuff that we have learned during this during this session anything token sessions um implementation i i need to give you the i need to give you the if you go to my github profile guys now the sources you can find github is this is the same as on my instagram repositories with this stuff if you go if you go to github bartos io you can find paint repositories with this stuff that we have learned and if you have questions regarding this it's time to do this then we can discuss anything about the program um i have a lot of time joseph serrano and we have three more cups first three people who join web security academy would receive this cup so um first three people who joined the program because you can think we have like about two days left to think about it if it's for you if it's not for you but first three people who who join and then send me a shipping address receive web security i build secure apps ninja cup first three people receive this cup shipped to the door of the apartment i will get some water now guys uh walker says congrats uh so uh again github link now it's time for questions and answers i'm all yours we have uh some people left who maybe want to ask questions about the content of the presentation or the program we have found the winner and we say that there are three more people who receive this cap for free the first three people who join the program you have time to discuss maybe by the way i didn't say most important thing we have some nice guys if you go if you go because i have not added if you if your company is sponsoring you i have a brief note to your manager that you can show or your employer you can show if you go to web security academy dot com slash company pdf slash company pdf there is like a small brief managers uh quote why it is worthwhile to invest in this program from the perspective of a company right that they can have more skills in the team they don't have to put people away from the projects we are working online it's mentorships and support for uh the developer so basically these are from the perspective of manager download this pdf send it to your manager and say that this is how you want to spend your training budget this is how i believe can be useful mr nabin if you stop if you don't stop spamming you are going to be banned because i see you're sending the same comment all the time i'm sorry i need to ban you um okay we have some spammer that was blocked i hope that um he would not break our flow guys uh okay uh q a session patrick says thanks a lot bartos it was really great session now i'm gonna pick the questions uh what is the required background and the knowledge to participate in web security academy there is also this address on the website but i assume that you are at least junior developer at least you can write some javascript you know what is html you know um what is backend that there is a rest api so you don't have to be senior uh i would say if you are a junior developer of course you have you can be on the higher skills level but basically the minimum level to benefit i would say you have to be at least junior to be able to write simple stuff johan does this answer your question yes the code from the slides is the budget note and budget angular ripples that are pinned that are pinned to the profile do you guys have more questions i don't know why we had this spammer but this tool allows me to to block mark okay what is the difference between js and ts um typescript is a super set of javascript that has types that has more features that has type safety that have that has much more tooling that it makes convenient for developers to write software but in production this typescript code is compiled to javascript so that the browser can understand this code just wanted to say thank you for this presentation and i will maybe join your program in the future with you the best thank you jonathan sorry perfect thanks guys so now is the time to have maybe i will look here by the way um mr adam who won the cup don't forget to send me a dm on instagram with your detailed shipping address so that i can send you this wow it's an hour and a half almost of the light stream i still don't have water but i will drink something later on guys any more questions do you cover state management uh in web security academy we don't cover state management because this is a totally different topic that is not so related to security so i would say no this is not the topic that is covered in the program maybe in some other program we will cover state management but in web security academy we focus on specific things that i explained to you previously when we talked about agenda it's 12 weeks of oh yo i'm sorry antonio can you speak in can you type in english then i would at least be able to to answer what you are asking about there was yet another spammer i blocked him you said 12 week igor says you said that 12 weeks 2 hours per week uh what does this so the videos i the videos that are released every week are about one hour sometime an hour and a half so imagine that you spent an hour and a half for videos and then maybe half an hour on homework or implementation task or whatever you want to practice right so at least one hour maybe an hour and a half for videos maybe sometimes you want to make notes then maybe half an hour for the task the coding task the assignment task that is inside of the given module but also on the top of that uh this does not include first of all bonus modules that are um released according to the schedule so those two hours what i include by the inside this is this base time for the videos that are released every monday so again an hour maybe an hour and a half of the videos and some half an hour for the coding task it may take you more time than that but this is the baseline then these two hours does not include bonus modules that are released according to the schedule and this does not include the time spent on live q a sessions because those live q a sessions are not mandatory for you to get the most of the content you can learn solo you can learn alone it's not there is going to be everything in the program that you can do this on your own those live sessions are for you to join to discuss to ask questions to alleviate all your doubts and maybe discuss with others thank you for everything you are an amazing speaker thank you i got some experience in conferences um on the different events so life meeting is something different but i appreciate your uh comment thank you very much so igor did i answer your question when it comes to the time mark asks what ide nice tanks what id will be used better i use phpstorm i use uh vs code actually i love this vs lightweight vs code this is my um ide of choice but maybe others have different different uh different preferences but this is my preference because i love this tool it's lightweight and powerful enough other more questions okey dokey i look at the comments mark says okay thanks this code is the best nice thanks how long in total is the video of content presented on this program whoa having those modules okay so as i said it may be an hour or an hour and a half let's take it an average one hour per module so if the base 12 weeks is 12 hours approximately on average one hour a week but we have tons of bonuses and bonuses sometimes last an hour sometimes a little bit less than an hour but i try to fit about one hour average per module so when you think about a module it will oscillate something around one hour so you take the number of modules that are available in the program and you multiple multi and you have the number of uh hours approximately right that the whole program is composed of right so the baseline is 12 hours because approximately one module in the base program would have one hour but then we have those bonuses for now we have four of them as far as i remember and one of them could be one hour one of them would be a little bit longer than an hour one could be 40 minutes one could be 55 minutes it would somehow oscillate but usually those bonus modules are a little bit less longer than the baseline modules right because we have 12 bonus modules they are on average one hour hour and a half bonus modules are on our little bit less than an hour sometimes 40 minutes sometimes 45 minutes they oscillate about an hour but they i they are usually um shorter than the baseline modules so you can easily calculate based on the number of modules how much content is there inside one more congratulations to adam any other more questions don't forget to send this pdf to your manager if you have a training budget under company.pdf okay i have adam dming me with the shipping address so i hope that when i ship it as soon as possible it will be delivered to slovakia very soon okay thank you do you know any other kind of text editor like adam or brackets and what do you think about them i don't know i don't use them i use vs code and to be honest i cannot tell you anything about those editors i have never used atom i have never used brackets so i cannot tell you anything about any of those editors we can see this code is the best okay guys so it's hour and a half unless you have uh more questions you can also reach out to me later on but for today i want to thank you very much i hope to see you on uh program mind the deadline because it's strict we are going to have uh amazing time together one more time thank you very much i hope to see you soon somewhere over the internet bye you don't forget that we have three more cups to give away for first three people who hop on board the academy thank

Channel: Dev Academy

Views: 5,942

Keywords: role based access control, role based access control in angular, role based access control node js, node js authentication, role based authorization, angular login, role based access control in angular 8, angular authentication and authorization, node js api authentication, node authentication, role based access control and rule based access control, role based authorization in node js, role based authentication node js, rbac angular, rbac nodejs express, rbac nodejs, rbac

Id: boaKDuQ9IZU

Length: 98min 15sec (5895 seconds)

Published: Tue Jan 26 2021