JWT Based Security
Securing the application with JSON Web Tokens
Securing the App#
Up until this point, we have been making great progress, but our backend API is unsecured. We will address security in this module by using JSON Web Tokens (JWTs).
JWTs are an industry-standard way of representing identity that can be used to authenticate and authorize an API call.
Once you have an actual JWT, the security mechanism is pretty straight forward. You attach the JWT to your API request header and then the backend API validates the JWT prior to handling the request.
Here's an example API request with a JWT:
For this course, we are going to integrate with Auth0, a third party service. Auth0 will generate JWTs and manage users for our app. To get started, head over to https://auth0.com and sign up for a free account.
Creating an Auth0 Application#
Once you get logged into the Auth0 dashboard, navigate to the Applications section and Create Application. Choose the Single Page Application option. You can call the application
Creating a Test User#
Next, go to the Users & Roles menu and choose Create User. Complete the form to create a test user, making sure to remember the password you use.
Integrating Auth0 with the Frontend Application#
We need to take a few steps to integrate Auth0 into the frontend Svelte application. Here's an overview of how this process will work:
For frontend lunch administration pages that need security, determine whether the user is currently authenticated
If the user is not authenticated, redirect the user to the Auth0 login page and provide Auth0 with a callback URL
The user logs in and Auth0 redirects the user back to the callback URL provided in step 2
When Auth0 redirects back, it will provide a special code in the callback URL, e.g., http://localhost:5000/callback/code=kjsdlnliksdfsdf
The Svelte app will then parse the callback URL and receive the user's JWT
Store the user's JWT in the browser's
localStorageso that it will be persistent across tabs and available for API calls
Ok, it's a lot of steps and sounds complicated, but hopefully it will make more sense as we work through the code.
First, install the Auth0 SPA library in the frontend application:
Next, we are going to update the
AdminLayout component that we already use for all Admin pages. We'll add our Auth0 onMount code and a logout button.
AdminLayout.svelte add a
Logout button to the markup and stub out a logout function:
Now, we can use the Auth0 library in the
onMount function and handle authentication, but first, there are a couple of places where we will need Auth0 config, so go ahead and create a file called
auth0-config.js in the
frontend/src directory of the project.
You can find the config values needed by looking at the
school-lunch-frontend Application in the Auth0 console.
Back to the
AdminLayout.svelte file, import
createAuth0Client. Then we'll add a bit of code to check the authentication state of the current user. If the current user is not authenticated, then redirect to Auth0 for login.
onMount function to add the following Auth0 related code. For now, we're still setting a test user in the
user store. We'll address this in the next lesson.
At this point, if we go to test this code, we'll get an error in the browser's console. We need to set Allowed Callback URLs and Allowed Web Origins in the Auth0 dashboard.
In Auth0 under Applications > school-lunch-frontend > Settings, add the following:
http://localhost:5000/callbackto the Allowed Callback URLs field.
http:/localhost:5000to the Allowed Web Origins field.
http:/localhost:5000to the Allowed Logout URLs field as well.
Make sure to hit the Save Changes button at the bottom of the page.
The Auth0 Login Page#
This time, when you test the application by refreshing, you should be redirected to an Auth0 login page. Enter the credentials you used for your test user and sign in.
You should be redirected back to to
localhost:5000/callback, however, since we have not created that route yet, you will should see
When you signed in, you saw the Auth0 login page. You can customize the look and feel of this page in the Auth0 dashboard under Universal Login.
Additionally, as the user, you may have granted consent to login to the School Lunch application. You can configure Auth0 to skip the consent question under APIs > Auth0 Management API > Settings > Allow Skipping User Consent.