0 To Auth In An Hour For Your JavaScript App

Hello, everyone, again. My name is Asaf, and I'm going to cover in the next one hour or maybe a bit less, I'm going to cover how to facilitate authentication to a standard JavaScript application that is written in a Node and React application. My premise for you for this session is that you're going to have the ability to add authentication in no time to any application, and you have a better understanding about the moving parts authentication and how to do it in a manner that is both secure and have a good UX.

So, what we are going to cover in the next session, we're going to talk a bit about few authentication concepts. And then we are going to jump right into coding the authentication part in the application that we have. Just to mention the prerequisites, I assume you have a basic understanding about JavaScript, React, Node, and Express. You can manage it, even if you are not familiar with one of those concepts, but it is recommended. And also, if you want to check out the boilerplate code and to use the same application as I am going to use, you should have a GitHub account. I will publish the a open-source repository for the template application. You can use it. And, if you want, you can write the code in any IDE. I'm going to use VS Code. This is if you want to code and also Node 18 or higher.

One second. I want to see the chat here. So, if you have any questions, feel free to write them in the chat. I'll try to be responsive there and just hope that I'll see the chat. But feel free to also ask questions, pause, to turn on your mic. Whatever you feel more comfortable. Also, I have a colleague here and he can also answer the questions.

Okay. Before we start, very quick details about myself. My name is Assaf. I work at Descope. Descope has an amazing platform that can help every developer build a secure and frictionless authentication. We have basically support all authentication methods out there. We support both B2B application, business application, and consumer application. We are focusing more on passwordless, and we have multiple multiple approach to integrate with authentication service, either no code or some code or use the API. If you want, you can read more, you can just try the scope in Google or go to the scope.com and you'll find us there. Beside that, my experience besides arguing a lot with the product team, I write in GoLang and in JavaScript and TypeScript, and in my free time, I love to play Frisbee and learn about astronomy, and also I'm a Real Madrid fan, big game today, like that's it about me.

So, the story is the following. We are here in the sprint planning meeting, and we have a simple app, but it doesn't have any authentication, so we need you to do it, and you have one hour to do it, maybe a bit less because I talked a bit lengthy before. So, what we are going to do, we are going to break down the authentication concept. We are going to, this is the sprint, how we are scheduling this sprint. We are going to talk like a bit about the authentication concept and break down. We are going to have a design architect about what happens where in the application, what happens in the front end, what happens in the back end. We are going to code the client side, we are going to code the server side, and in the free time, we are probably going to leave a few minutes to coffee and debugging.

Before we are starting, I want to show you the app that we have. This is a very simplistic app. I hope it's running. No, it's not. I'm going to share the information about the repository, et cetera, later on. Just want to show you what we have and what we are going to build. We have a very simplistic app. This app has two pages, the dashboard page. Dashboard page shows you information. The concept of the app is give you information about your ice cream consumption. Doesn't really matter. The data doesn't really matter. It can be any application.

We have a few dashboards here that basically shows you information that is dedicated to the user. This part eventually, we want to protect it via authentication, so only a person who is authenticated can access this information. Also, we have a login page. Currently, this login page only shows a very simplistic form. And this is the the template that we have. And we want to facilitate authentication, so whenever we are going to login, we'll be able to access this only if we are authenticated.

Okay, I'm going to go back to the presentation. And sorry. So let's start with breaking down what we are going to do. I'm going to basically describe. Sorry, let me go into a full screen. So I want to give a short like a, sorry. Yeah. I want to give a short TLDR about what is authentication in a few words. Basically, it's the process of identifying a user that attempting to access a particular application or a resource of a system. So basically, the goal of this process is to ensure that the user is who they claim they are. And to prevent, probably the most important thing in application security is to prevent an unauthorized access to a resource.

So let's say that the user attempts to access the application like we saw before, like to get the dashboard information. So Alice bring me the data, the application will basically respond, no 401 usually, 401 HTTP code, which means unauthorized access. Let's try it again with an authentication process. So Alice says, hey, this is me. But here is a proof. A proof can be any, what's called like authentication factor if you heard about this concept. Biometric information is like something that I am, or a password is something that I know, or maybe one time passcode that sends into your phone usually something that I have like a phone. So this is the general concept of authentication factors. And once the application verifies that the proof is actually valid, it can return the data to the information or perform the action instead of, perform the action that the user requests to make. This was the general concept of a user and server. I want to kind of dig one level deeper, and I'm going to start by describing the protocol between the browser and the server, and I want to go one layer down. Usually what happens is that the browser sends credentials, so it can be the usually it's going to be the like the username and password. It can be maybe a bit more complex process.

Okay, bring me the email. I'm going to send you a code link to the email, and then click the email, and this is going to be the proof that we discussed before. And then the server validates those credentials. After that, it usually creates some kind of a token that represent this user or this session. Okay, the browser usually stores this token in a local mechanism, maybe a cookie or a local storage or in memory. And then in every subsequent request, it will the browser will send this token along with the request. And then the every time before the server will answer the browser response, it will first validate the token or the session and will return the data.

Okay, so, in general aspect, there are two. In general terms, there are two major processes here. The first process is the authentication part where the user is authenticated. This is usually done once. Let's say that you want to show a login form like we saw before. And then the user gets the browser will get a token that will be valid for a longer amount of time, like 10 minutes, 30 days, etc. And the second part is the validation. This is usually done for a few services. We don't want every request to require some authentication. If you go to any application and open the dev tool, you will see immediately 30 requests. And we don't want to authenticate for each request. We want to kind of authenticate once and use the same token. So we have two ways to implement the tokens. One of them is using what's called a server session. Basically, it means that the server is responsible for managing the session. It's a stateful mechanism. And the other one is client tokens. If you heard about the concept of JWT, this usually this mechanism uses JWT or JWT for this approach. We're going to give a very high level description of those.

So if you are talking about a server session, this means that the server is responsible for managing the session. So basically, they're going to run the same diagram as before, but with a bit more details. So like before, the user provides credentials, then the server validates them. If the user is authenticated, the server will usually store the user or the user session information in the database, and will identify this session under the session ID. It can be like storing the username, user email, the login time in the database, in a certain database, and it will return the session ID that was stored in the database to the browser. The browser will store the session ID, and it will send the session ID in the following request. Then the server will basically do a query on the database to see if the session ID is in the database, and if so, it will use this information to identify the user. So this approach is what's called stateful. It has a few pros and cons. The main pro is when the session is manageable, the server can revoke a session in a very simple manner of deleting the session ID from the database. Basically the server has more control over the session.

The main problem with this approach is scale because every request requires the server to query the database. Even with fast memory solutions like Redis or memcache, it is still relatively slow. For high-scale applications with a microservice architecture, this approach is not scalable. The second approach is using client tokens. The user provides credentials, which the server validates, and then the server creates a JSON object token (Jot) by signing it with a private key. The client stores the Jot and sends it with each request. The server validates the Jot using a public key. This approach is commonly used in modern applications due to scalability considerations. However, it can be challenging to invalidate a token once it is created because anyone with the public key can validate it.

And the disadvantage is that the stateless application, the stateless manner of this protocol, it's been difficult, more difficult, I would say, to invalidate a token, because once the token is out there, everyone that requires to validate them can do it with the public key. It's very hard to once you've created a jot, it's challenging to invalidate it.

Okay. I just want to mention that there is a very cool video in YouTube called Session versus Token of the FireShip YouTube channel, which in general is a great channel, and about this topic, I highly recommend to watch it. If there are any questions, feel free to ask either on the chat or here. I'm going to continue.

So we are going to implement in our application that we saw before, we're going to implement the second approach, the client token. And I want to describe the general architecture of our application in terms of moving parts. So we have a Desktop application in React, but the server that we saw before actually compound with multiple parts. It has the application server, which is going to be a very simple node application. And it's going to have an authentication service. This is traditionally something that is, I would say, complex to do. And you can use a SaaS provider such as Desktop in order to not need to handle all the email sending and signing with a private key and key rotation and a lot of complexities that usually, when you write an application, you prefer to focus on your own. So it's highly recommended to use some kind of an authentication service.

In this workshop, we are going to use Dscope as the authentication service. And I wanted to kind of repeat the process, but this time with the separation of what goes from the browser to the authentication service and what goes from the server to the authentication service. So the browser will send, whenever the browser wants to communicate, it will send directly the credential. It will do the authentication directly to the authentication service. The authentication service will validate the credentials and will create a JWT, return it to the browser that will store it either on local storage or in cookie. And then we're going to store the JWT, and send it in every request of the dashboard that we saw before. And the server will validate the JWT with the public key that it will download from the authentication service. This download part needs to basically done once, it's very lightweight process. And that's it.

We'll just to reiterate what we are going to do. We are going to first implement the client. We are going to build the form of OTP and social, going to basically implement one time password authentication, which will send authentication, one time passcode to the user email. It can be a phone also, but we're going for simplicity, we're going to use email. And we are going to implement what's called social login, like log in via Google or Facebook or whatever. And then we are going to use the scope SDK to do the login part. And then we're going to send the JWT to the server, then the server will validate the JWT.

And in the end, we are going to implement a logout mechanism. And if we'll have time, we're also going to have Easter egg, but I can't promise that.

So, yeah, we are going to start coding. So I saw a meme of the other day, when like the difference between when you code alone, and when you code when someone is looking at your code. So, apologies if stuff will be a bit slower than usual.

So, if you want to, I'm going to run the code and go over things step by step, but if you would like, sorry, you can go to the GitHub repository that I'm sharing right now, and you can check out the code, the branch, sorry, called Zero to Auth Start. And this is going to be the starting point of our application.

So, I'm going to do a very quick overview about the code here. We basically have a client application with an SRC directory, and we have two major components. We have the dashboard component and we have the login component. I'm not going to... Apologies, something turned off in my computer. Okay, and we have the two components that we showed before in the examples, and in the back end, we have a single index file which basically runs at a very simplistic node server, and the dashboard would basically query the four get routes that we have here, and they return the data, and this is basically the resource that we want to protect. One second. Let me do a quick preparation here.

Okay, so the first start after you can clone the repository into your application and you can run npm install. This will install all the dependencies also in the subfolders, and you can run npm run dev. This will immediately open the application. You can play with it. You can go to the login page either with login or by clicking on the logout button which currently doesn't do anything.

The first part that we want to do is we want to create an account in the authentication service platform. So we can go to the scope.com. This will be required in order to create a project because eventually we want the users to basically in the authentication service each application is represented with a project. So we want basically to create a project so we can manage users in the authentication service. So we can sign up here. I'm already signed up. You will have a form here that will show basically you can sign up either with the link or with google. And once you sign up a project will be created for you and you can click on the let's go button and you will be redirected to the Dscope console. This is the place that you can manage your entire users and authentication. I can talk about this console and its capabilities for maybe a day or two.

So I encourage you to go and investigate it yourself. There's a lot of cool capabilities but I prefer to focus on making the timeline of our short sprint. And the only thing I want to go here is to go to the project page and to copy the project ID. I'm going to use it in a short time in order to identify the application here in front of. Sorry, so the browser and the server when they communicate to the authentication service, we can identify the project, the specific project.

Okay. Sorry, let me go back to the code. So the first thing I'm going to do, I'm going to stop the application. I'm going to go into the client folder, and I'm going to install the scope React SDK. This will simplify all the communication in front of the authentication service. Okay. Once I install it, basically, I can start and use it. Okay. So we can see that it's already added to the package. We can see that it's added to the package. One second. Yeah. It's added here to the package.

And I'm going to go to the application component, the root application component, and I'm going to import the authentication provider from the scope React SDK. This will add everything I need in order to, let me just do it quickly load. So the ID will recognize the, one second. Okay. Let's give it a bit of time. And right now what I'm going to do, I'm going to add the authentication provider. I'm going to wrap my entire application with the authentication provider. And I'm going to add the project ID that I copied before. And second, I have it somewhere over here. Yeah. Okay. Let me run again npm install.

It should be good enough. Okay. I think you need to add from. Input from. Thank you. No problem. I talked before when you code and someone else is looking. Thanks. Thanks, Eric. Appreciate it.

So, yeah. I could debug it for like another 15 minutes. Thanks. This will basically inject everything we need in order to use the SDK. And now the second part I'm going to basically I can, you know what, let's run it. And I don't think we are going to see any change. Everything here is the same. And right now I'm going to implement. I'm going to go to the login page. And right now the login page has... Sorry. The login page has like a simple form. I'm going to maybe open the Chrome DevTools. So we can see what happens in the side. Okay. If we need... So right now we don't have anything here. We're going to implement the API calls behind this. So right now when I do this, basically nothing happens, okay? Just print my details. And I'm going to add something here.

And nothing will... Nothing happens. Just print. I'm going to implement the API usage for those actions.

So right now I'm going to go to the... I have the phone buttons that... When the phone is finished, this is going to run. And I'm going to basically add here another step called... I'm going to remove this. And I'm going to add here... Like, sorry. Before, I'm going to use the scope. And this is the best way, by the way, to give the idea to automatically import whatever you need. So I'm going to use the available methods for OTP. Sign up or in basically, if the user exists, it's sign in. And if not, it will create a user. And I'm going to use email. And I'm going to give the email here. And if the REST.OK, basically, if it's not OK, I'm going to throw a new error with the response error. Sorry, I forgot to do wait. And OK. And I think that this... OK, where is the warning? Oh, from.email, I'm going to add this SDK. OK. So I just added one call to the SDK that we created above.

And if the user in the second part of the form, we are going to add another call to basically take the code that the user is entering, and we are going to call OTP.verify.email with the email and the code. Okay, so, I forgot to take the email here. This is the problem. Okay. Okay.

So, we're going to store the email for the next step using this, the useState hook. And then we are going to call the verification of the email. I still have one error. Code. Yeah. Form.code. And I think I'm missing just the email here. Right. This is going to be, I think, good enough. Let me copy paste here. So, where should we go to go? Okay. I think I don't need to refresh it. I'm logging in. You see that this time tooks a bit longer. And if we go, let me just clear everything from here. We go to the network tab, we're going to see that there is one request, the Disco Service. Let's see if I got the email. I got the email. I'm going to copy paste the code from the email. I'm going to, I think I'm... Let me try to run this again. Okay, I think I have something bad in my application code. I guess you need to form that email. I think I need to wait. That's it. One last time. Okay, we succeed. And let's see what happens right now. Right now, basically if we want, it's not really interesting, but we can see that the user is logged in and basically nothing has still changed because we haven't protected this in the backend side. So let's add the backend implementation.

And I'm going to go to the index.psx file. And before that, I'm going to stop and I'm going to go to the server folder and I'm going to install the disco node SDK. This will facilitate, this will help us to kind of use the backend to communicate with the authentication service on the backend.

And the only thing we need to do is basically we need to introduce a middleware that will be used whenever we do those call, this middleware need to do the validation part. So the first thing we want to do is we want to create an SDK. We're going to basically first I'm going to import the scope clients function from the node SDK. And this will basically help us to, this will facilitate the communication from the SDK.

And now we are going to write the middleware. The middleware is a basically a function. Let me turn off the copilot. Okay. And basically it's an asking function that receives a request, response. Okay. And the next function. Okay. And the function, basically what it does, if it can run some logic, and if the logic fails, it can returns 401. Otherwise it will call the next function, which may be any function that is defined here. So what we are going to do, we are going to add, we're going to get the authorization header from the request header.

Okay, let me just, usually we're going to edit in a very standard manner, and we're going to get the session jobs from that header, which is basically replacing bearer with nothing, basically trimming the bearer prefix. And we are going to validate this JOT, okay? So we are going to call the SDK validate JOT with that session JOT. This function will throw an error in case the, an exception. So basically we want to catch an exception. And if the exception is, happens we're going to return the 401 status code with maybe with an error. Maybe we can do just like new error. Sorry. Okay. And we can also console.log the Q, the exception. Okay. Otherwise we just going to call next. Okay.

And the only thing that is left is basically to use this middle row.

Okay. I'm going to start the application again and let's see what happens.

Okay. So we can see that all our requests returning 401.

Okay. So what we need to do is to send the session token in every request.

So we are going to basically go to the dashboard page. This is the place that fires the request to get the information and we are going to add a headers and in the headers, we are going to add the authorization header.

We are going to do something like Bearer and here we are going to want to pass the session token.

So the Dhiscope SDK has a functionality for it, get session token and we can use it.

Let's start.

Okay, so let's see the application right now.

And you can see that now the application returns the information.

We can see that the request, if we go to the request headers, we can see that on the authorization header, the session tokens, which is the alphanumeric long string here, are presented.

And this was the overall end-to-end authorization process.

So we added in the login, we added the two-step login process, which is sending the email and verifying the code.

And then we use this session, we send it to the server and we added the middleware in the server.

In the last few minutes that we have, I want to also implement the social login part.

And the social login is probably very similar to the OTP in terms of implementation.

Let me just copy-paste the implementation from a branch that I have on the site.

So we won't spend too much time on it.

And we're going to go to the login and here in the button of the social login with Google, basically we are going to replace this implementation like basically we're going to go to the SDK that we imported from the use this scope and we're going to call the Google part.

This will handle, this will start the OAuth process and we're going to take the response URL and redirect the user to that response.

And the other part that is missing here is that we are going to basically add a use effect and the user effect here will going to handle what happens when the user is returned from a Google.

So we are basically going to get the code from let me just import before and we're going to use the user search param from react router dom.

And here we are going to get the code from the search param and we're going to do the exchange part.

So OAuth is basically compound with two process.

You start the process when the user clicks the button, this will redirect the user to Google.

And when the user is backed to the page, we are going to redirect them here.

Let me just add the search params and SDK and navigate here. So let's see what happens here. We're going to go to Google. This will automatically redirect me to Google, okay? And once I completed the call, it will redirect me back. And you can see that I can still perform the login.

The last thing I wanted to cover is the logout part. So the logout is made only in the front-end side. We can go to the navigation bar where the logout button. And here we have a basically a handle logout just to the navigation. We are going to import the SDK from Use The Scope. We're going to import Use The Scope and get the SDK. And we are just going to call SDK logout. Basically, this is it. This will call the logout and will also automatically clean everything that is required from the browser cache. So you can see right now I can't see any data. If I want to go, I want to see the data, I need to complete the login again, and I will be able to see the data.

So just to reiterate what we have done, we've implemented the form in the front end. We called the authentication service API in order to return the JOT, and every request to our service, we added the session token. And in the service we just implemented a middleware that is basically validate the JOT and returns 401 if the JOT validation fails. So I think that's it from my side, and I'm going to stop sharing. And I want to hear if you have any questions.

Yeah, Eric here. So thanks for the presentation. I have a question. I'm mostly working in environments where they have platforms like AWS. When do you choose to use the services from AWS? When are you using something like Disco? So let me just understand that. Let me make sure that I understand you correctly. You're asking, so if you are using AWS as in which service of AWS are you using? Well, we are using AWS, so it's the platform where we deploy our apps, but also use the native AWS services, and there are multiple services from AWS that you can use for authorization and authentication like Cognito, and they're also using Azure for the authentication. But I'm looking for when I am going to use, in such an organization, when I am going to use the standard authorization of the platform they're providing, or when are you going to use something like Dscal? So, I think that eventually, if you are implementing any application that requires user interaction, you need to have, you need to have a sort of interaction with the user. So, a service like Dscal can simplify the entire process of JWT management and session management.

So, for example, there is the entire process that we haven't talked about it, about how the refresh of the session management happens, because the session is very short, have a very short, it is very short living, it like valid for 10 minutes and you don't want your user to authenticate every 10 minutes. So, there is refresh token and there is another layer of authorization on top of that and managing tenant, et cetera. So, if you have any business logic that requires user authentication, I encourage you to use a service like authentication service like Dscal. And if you need to, so, for example, managing infrastructure, EC2 instances, et cetera. So, probably the AWS basic capabilities are sufficient but if a user interact with the product, I encourage you to use something like Dscal.

Okay, thank you. You're welcome. So, I let you, if you have any further questions, feel free to ask. I want to show you just one last thing. Here, you saw that I kind of broke my fingers while I try to implement the UI form, et cetera. I want to show you another approach that the scope offers which called flows. So, basically what you see... Sorry. Let me complete my login with... Google to our console. So, building forms and managing other authorization authentication method, it's hard. For example, if you want to use biometrics, you need to understand the protocol. The scope really simplifies this for you. You can build a form in the scope UI. We have a very nice wizard that you can apply. You can basically choose which application you want to build. For example, I want to build a consumer's application. And then you want to choose which authentication method you want your user to experience. So for example, I want my users to experience biometrics and socia login. And I can have another authentication authorization if I want to introduce multi-factor authentication. I'll just go ahead and skip it. And then the scope will automatically build for you a form and the entire flow. And this can be later be customized and you can start using it, okay? Immediately, okay? So I just created a new project. I chose the methods and I can start using them basically in no time. So you can see that under the hood the scope built the entire flow for you.

So here there are the screens that you can customize. You can customize the style, everything. Are you sharing it? Sorry, are you sharing? Because I'm seeing the Visual Studio. Apologies. No problem. Thank you. I also saw the keyword flow over there so I was thinking it was the same, but okay. Thank you.

So whenever you sign up to the scope, okay, you can create, a project we create for you. And what I wanted to show you is that another approach that the scope support is no code and you create the entire login experience and the user journey within the product and customize it here with a very high level of customization. So I can choose which kind of application I want to build. If I want to be the application for consumer or for businesses, okay. And I can choose which authentication method I want my users to experience. So for example, I want them to experience social login and biometrics, okay. And without any multifactor authentication, I'm just going to skip it. And in no time the scope created a customized experience for my project. And then I can just click next and it will automatically create the entire experience for me. This is like a demo app and you can see how to integrate this in React application, in Node backend or Go backend, or Python, et cetera. And then you can customize it in a further... You can customize it in multiple ways. For example, you can choose the entire style of the pages. For example, I'm going to use like different colors and I can choose a different logo for my application. And it will automatically apply on my screen and I can control and see exactly what is the user journey that my user experienced, the screen, the action, et cetera. This is highly customizable and you can basically achieve anything with just a drag and drop experience and with just the simple few lines of code, you can integrate it into your app.

That's it. Thank you for joining. And if you have any further question, I'm going to stay here and was a pleasure. Thanks a lot. This is also possible if you're working with React Native. So creating the screens and then is it also usable in the React Native app? So a very good question.

This is, we are on the verge of releasing a dedicated SDK, dedicated enhancement for React Native. Yeah, this will be available, the React Native part will be available in the next few weeks or so.

If you're interested more, you can go to diskop.com and join our community. It's like a Slack workspace that you can ask anything. And this is like a very nice way to communicate with the DiskOp team.

Okay, cool. So I see that Abhishek just shared the link. If you want to join. Thanks. Yeah. Thanks. Thanks everybody. So it was a pleasure. And thank you for your time.