Add Countersignature Authentication with airSlate SignNow

Add countersignature authentication

hello everyone i'm swizz and today i want to talk to you about a pesky little topic called authentication it's one of those things that you're going to need to add to your react app whether you're using create react app next js gatsby or any of the other frameworks that you like you are going to need to add authentication at some point it sounds pretty easy in theory right you need some way of saving who the user is you need to check with the server whether they are the person they say they are you need to potentially save their password maybe their username and you gotta do some little you know it's pretty easy talk to the server hey is this person logged in i have these credentials the the server saves them and then things kind of just work out that's how that's how it usually works but good authentication is where things get really tricky because with good authentication you have to deal with things like security you have to deal with authorization whether this person even if you know that this person is this person do they have access to this page or do they have access to that page are they an admin or their user are there a meta admin whatever else you might want to think of authorization is really the hard part of a lot of authentication where authentication is who are you authorization is now that i know who you are do you have access to a particular topic or a particular resource that's that gets tricky and then when it comes to saving all of this stuff on the server it gets even trickier because well what if you're what if your database gets licked leaked can people read your passwords or can they not read your passwords how is your hashing structure are you still using hashing from many many years ago or are you using a modern salt and encryption and whatever honestly it's really hard to even keep up with what you should be doing how you should be doing it and then when it comes to saving the authentication state on the front end because the front end needs to be like hey i know you're already logged in and i know who you are so i need to tell the server to check with the server whether this is still true do you save that in cookies do you save it in local storage there's a lot of tricky little things that come with that one of the big ones is that once you split your app into multiple apps you're going to want to have an authentication service or some sort of authentication provider that can work with multiple services like if i log in on ios do i want to still be logged in in browser if i switch browsers do i still want to be logged in usually as a user i do but you as an app developer get into a tricky situation where you have to have api based authentication you can just be passing cookies around because you need to have you probably want to use the same authentication for multiple different clients whether they're a server trying to do something in the name of your user whether it's the web app trying to do something in the name of the web app all of that gets really tricky so people start building authentication services and they start trying to think about how to do tokens when you really get start reading about it it kind of blows your mind i honestly you just should never roll your own authentication you should rely on a service that already provides authentication because there's a lot of little tricky things that you get you can get wrong and you don't want to end up like equifax which leaked something like many many million 100 million users you don't want to be the person who everyone laughs at for oh wow they rolled their own authentication lost everybody's data and now you can just go to the dark parts of the internet and get everybody's social security numbers because equifax had a breach oops you don't want to roll your own authentication you want to use somebody who already exists who's out there and whose core business model it is to make it easy for you to add authentication and authorization and user management and all that fun stuff to your app so you have a lot of different options you have alt zero as one of them you have netlify identity as a simple solution there's aws cognito which is kind of tricky to set up you have firebase authentication and there's probably a bunch of others you can build your own that follows the same protocols but unless you have a team of experts on authentication authorization encryption jwt tokens and really you have time to do this and it's your core business model you should probably just use somebody else once you start using somebody's authentication provider this stuff still is kind of tricky to use especially on the jam stack or on the browser you need to you have this weird authentication flow where the user clicks a button gets redirected to somebody else's authentication page and you want that page to be somebody else's because that guarantees security and make sure that you as the application developer aren't sniffing people's passwords and usernames which you don't want to do well you might want to do it but you shouldn't want to do that so you redirect them to a different page they log in they authenticate and then that page redirects them back to your page and you have something called a callback page which then processes the the authentication looks at the looks at a bunch of data in the uh in the url sends it back to the api for for your authentication provider says hey is this data correct did you send me this or is somebody trying to hack this poor person and the authentication provider says yes that is okay and you have to then put it into your global state you have to make sure that every component that needs to check hey is this person currently logged in should they be seeing this authenticated content should they be seeing this authorized content and there's a lot of little tricky things that you still have to do even though you're using somebody's authentication provider and most of these have to do with global state management and making sure that you have the right access and the right info and you everywhere so what i started building about a year ago and has now just reached version one yay use auth v1 is significant because it now has support for multiple authentication providers yay also it's there's been a lot of changes behind the scenes so it's now easier to use and configure and it just works better i built this hook called use auth which makes it really easy for you to add authentication and authorization anywhere in your react app it works with nexjs it works with gatsby i've tried it with create react app rather than have you trust me at my word that this code snippet is the best thing since sliced bread when it comes to adding authentication to your react app i'm going to show you we're going to do three minutes and we'll have authentication added to a completely blank gatsby app i started it with the gatsby default starter i installed a couple of dependencies and now we're going to add authentication we're going to start by creating a config auth react component that renders on every page load this part has also gotten a little easier since i recorded this talk you can see it in the documentation page that's going to be linked at the end of the talk if you're not familiar with gatsby going into gatsby browser adding a react a react component there helps you add something to every page and ensure that it's always rendering we don't need to wrap it in anything because we're using x state behind the scenes so there's no context provider or anything like that that you need with use auth everything is completely independent we're going to take the dispatch function from use use off this is a helper that's returned from the user that's returned from the user hook so that you can send events to the x-state machinery behind the scenes we don't need to render anything because again this is not a wrapper and we're going to have an effect that runs or on every initial page load but does not run on subsequent re-renders we're going to dispatch a set config event we're going to give it an auth provider that comes from providers.net life identity we're going to send use off our navigate function this is so that it can work with any routing solution that you want to use you can always use use auth regardless of what your setup as long as you give it the whatever function it needs to call to navigate because it needs to change between pages sometimes now to show that it's actually working we're going to go into index.js and we're going to create a login a login component which doesn't need to get any props it's going to take is authenticated authenticated is a method that comes from use off and tells us whether the user is currently authenticated if the user is authenticated we're going to return a logout button button which on click calls logout which comes from use off log out and we're going to say that we are currently logging out else we're going to return a button that on click calls the login function login and we say login so now a button should show up here let's see if it does oh we need to actually render it duh so we're going to render the login button here we now get a button and when i click this the netlify identity should pop up and ask me whether i want to log into this page in theory that should work but it's not five minutes later i don't know what i did wrong because it now works without me changing anything computers right so i click login and it asks me for the netlify url that i'm using for your for netlify identity i'm going to copy it so that i don't type or anything and set side sites url i can now log in as myself and i am logged in see the the button changes to logout i'm still me if i reload the page use auth looks at the local storage and makes sure that it checks the when when my session is expiring and preemptively puts me in the logged in state before it talks to the auth provider and verifies that that is still true what i can also do here is instead of just saying hi people i can say hello to myself so we're going to return this layout stuff and i'm going to const uh user equals use auth again everything everything connects to the data in the background without me having to really think about it i'm just calling use ask wherever i need something about being being authenticated or about the current user and if i'm authenticated i'm going to show user.email otherwise i'm going to say hello people i need to get is authenticated as well let's see so it now says his wizards blah blah blah i can log out puts me back in log in and it just works now let's say you want to change your authentication provider you're tired of netflix identity you want to use something a little bit more powerful with better administration features or whatever what does it take right now when you think about your current app what does it take to switch to a different authentication provider it's usually a lot of work right so what we're going to do now is switch this app to using auth0 instead still using use off and yes those are the only two authentication providers that are currently supported it's this takes time so let's see we're gonna go back into get browser and instead of netlify identity we're going to use alt0 as the provider we're going to give it the dispatch function and it's going to need a little bit more configuration because we need to set application keys and stuff like that we're going to have to create a new all zero callback page as well this page makes sure that all zero when it redirects you back to your app has somewhere to go we're gonna call it all0callback.js put it in source.pages and yes i'm copy pasting from my old code because you don't want to watch me type all of this it's basically taking the handle authentication function from use off and calling it whenever that function changes or the page is loading now let's see if this magically starts working five minutes later giving you more power than netlify identity but also a little bit more responsibility click login go to the auth0 authentication page see this is fully secure it's on their domain so i can't steal anything i'm going to use my existing user it's going to redirect us back yes i'm authorizing the app to to be used comes back to the callback page and it should me should redirect me immediately but it is not so i'm going to switch to the old mode because use authv1 is completely backwards compatible with the previous stuff so we're going to render this off provider which the auth provider is designed to magically set you up with all zero so now this is reloading and it's redirecting me back and yay it works so obviously v1 still might have some bugs by the time you watch this i will have fixed them i can log out it redirects me to the home page to make sure that everything is fresh log in yes see it works as promised we got that working in less than five minutes using both of the providers that are currently supported netlify identity and auth0 it's all use auth is designed so that you can easily add different providers i've created a an interface that is sort that seems to be working for multiple providers so i would like you because this is open source you can add new providers maybe add your own add your favorite there's i'm going to add documentation on how to do that very soon you can go to use auth.dev to learn more about how all of this works to learn more about how to provide how to add different providers to read the documentation and start using it in your own app i'll be hanging out in the chat room if you have any questions