This central access point to your application’s data raises the question: how can you provide access to the information to those who need it while denying access to unauthorized requests?

The industry has provided several protocols and best practices for securing APIs. Today we will focus on OAuth2, one of the most popular options for authorizing clients into our APIs.

But how do we implement OAuth2? There are two ways to go about it:

1. Do it yourself approach
2. Work with a safe 3rd party like Auth0

In this article, I will walk you through an implementation of OAuth2 for Python and Flask using Auth0 as our identity provider. But first, we are going to discuss the do-it-yourself approach.

Why Not Build Your Own Authentication and Authorization?

For a few years now, I wanted to give back to the community that helped me so much by teaching me programming and helping me progress in my search for knowledge. I always thought that a great way to contribute was by having my own blog, a thing that I tried more than a few times and failed.

But where did I fail? Instead of focusing on writing, I tried to build my own blog engine because it’s in my nature. It’s what developers do. They love to build.

But why do I mention that here? Because many fall into the same trap when building APIs. Let me explain with an example.

Bob is a great developer, and he has this great idea for a ToDo app that can be the next big thing. Bob is very aware that for a successful implementation, users can only access their own data.

Here is bob’s application timeline:

• Sprint 0: Research ideas and start prototyping
• Sprint 1: Build user table and login screen with API
• Sprint 2: Add password reset screens and build all email templates
• Sprint 3: Build, create and list ToDos screens
• Sprint 4: MVP goes live
• User feedback:
  • Some users can’t log in due to a bug
  • Some users feel unsafe without 2-factor authentication
  • Some users don’t want to get yet another password. They prefer single sign-on with Google or Facebook.
  • …

Let’s talk about what happened. Bob spent the first few sprints not building his app but building the basic blocks, like logging in and out functionality, email notifications, and so on. This valuable time could have been spent differently, but what happens next is more concerning.

Bob’s backlog starts to fill in. Now, he needs to improvise a 2-factor authentication method, add single sign-on, and more non-product-related functions that could potentially delay his product.

And there’s still a big question to be answered: did Bob implement all the security mechanisms correctly? A critical error could expose all the user’s information to outsiders.

What Bob did is what I did with my blog many times. Sometimes, it's helpful to rely on 3rd parties if we want to get things done right.

Today, hackers and attacks have become so sophisticated that security is not a trivial factor anymore. It is a complicated system on its own, and it is often best to leave its implementation to experts – not only so it’s done right, but also so we can focus on what matters: building our applications and APIs.

How to Set Up a Free Auth0 Identity Management Account

Auth0 is a leading authentication and authorization provider, but let’s see how it can help Bob (or you) build a better app:

1. It saves time
2. It’s secure
3. It has a free plan

Time to get practical. First, make sure you have an Auth0 account. If not, you can create one here for free.

Create a New Auth0 API

There is still one more thing we have to do before we start coding. Head over to the APIs section of your Auth0 dashboard and click on the “Create API” button. After that, fill in the form with your details. However, make sure you select RS256 as the Signing Algorithm.

Your form should look like the following:

Creating the API – image showing fields to fill out

The API details page opens after successfully creating an API. Keep that tab open, as it contains information we need to set up our application. If you close it, don’t worry, you can always access it again.

How to Bootstrap our Application

Because we will focus on the security aspects only, we will take a few shortcuts when building our demo API. However, when developing actual APIs, please follow best practices for Flask APIs.

Install the dependencies

First, install the following dependencies for setting up Flask and authenticating users.

pipenv install flask python-dotenv python-jose flask-cors six

Build the endpoints

Our API will be straightforward. It will consist of only three endpoints, all of which, for now, will be publicly accessible. However, we will fix that soon. Here are our endpoints:

• / (public endpoint)
• /user (requires a logged in user)
• /admin (only users of admin role)

Let’s get to it:

from flask import Flask

app = Flask(__name__)

@app.route("/")
def index_view():
    """
    Default endpoint, it is public and can be accessed by anyone
    """
    return jsonify(msg="Hello world!")

@app.route("/user")
def user_view():
    """
    User endpoint, can only be accessed by an authorized user
    """
    return jsonify(msg="Hello user!")

@app.route("/admin")
def admin_view():
    """
    Admin endpoint, can only be accessed by an admin
    """
    return jsonify(msg="Hello admin!")

Very simple right? Let’s run it:

~ pipenv run flask run
* Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: off
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

And if we access our endpoint:

~ curl -i http://localhost:5000
HTTP/1.0 200 OK
Content-Type: application/json
Content-Length: 23
Server: Werkzeug/2.0.1 Python/3.9.1
Date: Tue, 24 Jan 2023 21:24:57 GMT

{"msg":"Hello world!"}

~ curl -i http://localhost:5000/user
HTTP/1.0 200 OK
Content-Type: application/json
Content-Length: 22
Server: Werkzeug/2.0.1 Python/3.9.1
Date: Tue, 24 Jan 2023 21:25:42 GMT

{"msg":"Hello user!"}

~ curl -i http://localhost:5000/admin
HTTP/1.0 200 OK
Content-Type: application/json
Content-Length: 23
Server: Werkzeug/2.0.1 Python/3.9.1
Date: Tue, 24 Jan 2023 21:26:18 GMT

{"msg":"Hello admin!"}

How to Secure the Endpoints

As we are using OAuth, we will authenticate requests by validating an access token in JWT format. We'll send it to the API on each request as part of the HTTP headers.

Auth0 configuration variables

As mentioned in the previous section, our API needs to be aware and will require information from our Auth0 dashboard. So head back to your API details page, and grab two different values.

First, the API Identifier:

This is the value required when the API is created. You can also get it from your API details page:

How to find the API identifier on the API details page

Next, Auth0 domain:

Unless you're using a custom domain, this value will be [TENANT_NAME].auth0.com, and you can grab it from the Test tab (make sure not to include https:// and the last forward slash /).

Getting the Auth0 domain

Next, pass those values into variables so they can be used in the validation functions.

AUTH0_DOMAIN = 'YOUR-AUTH0-DOMAIN'
API_IDENTIFIER = 'API-IDENTIFIER'
ALGORITHMS = ["RS256"]

Error methods

During this implementation, we will need a way to throw errors when authentication fails. So we will use the following helpers for those needs:

class AuthError(Exception):
    def __init__(self, error, status_code):
        self.error = error
        self.status_code = status_code

@app.errorhandler(AuthError)
def handle_auth_error(ex):
    response = jsonify(ex.error)
    response.status_code = ex.status_code
    return response

How to capture the JWT token

The first step to validate a user is to retrieve the JWT token from the HTTP headers. This is very simple, but there are a few things to keep in mind. Here is an example of it:

def get_token_auth_header():
    """
    Obtains the Access Token from the Authorization Header
    """
    auth = request.headers.get("Authorization", None)
    if not auth:
        raise AuthError({"code": "authorization_header_missing",
                        "description":
                            "Authorization header is expected"}, 401)

    parts = auth.split()

    if parts[0].lower() != "bearer":
        raise AuthError({"code": "invalid_header",
                        "description":
                            "Authorization header must start with"
                            " Bearer"}, 401)
    elif len(parts) == 1:
        raise AuthError({"code": "invalid_header",
                        "description": "Token not found"}, 401)
    elif len(parts) > 2:
        raise AuthError({"code": "invalid_header",
                        "description":
                            "Authorization header must be"
                            " Bearer token"}, 401)

    token = parts[1]
    return token

How to validate the token

Having a token passed to our API is a good sign, but it doesn’t mean that it is a valid client. We need to check the token signature.

Since the logic to require authentication can be used for more than one endpoint, it would be important to abstract it and make it easily accessible for developers to implement. The best way to do this is by using decorators.

def requires_auth(f):
    """
    Determines if the Access Token is valid
    """
    @wraps(f)
    def decorated(*args, **kwargs):
        token = get_token_auth_header()
        jsonurl = urlopen("https://"+AUTH0_DOMAIN+"/.well-known/jwks.json")
        jwks = json.loads(jsonurl.read())
        unverified_header = jwt.get_unverified_header(token)
        rsa_key = {}
        for key in jwks["keys"]:
            if key["kid"] == unverified_header["kid"]:
                rsa_key = {
                    "kty": key["kty"],
                    "kid": key["kid"],
                    "use": key["use"],
                    "n": key["n"],
                    "e": key["e"]
                }
        if rsa_key:
            try:
                payload = jwt.decode(
                    token,
                    rsa_key,
                    algorithms=ALGORITHMS,
                    audience=API_IDENTIFIER,
                    issuer="https://"+AUTH0_DOMAIN+"/"
                )
            except jwt.ExpiredSignatureError:
                raise AuthError({"code": "token_expired",
                                "description": "token is expired"}, 401)
            except jwt.JWTClaimsError:
                raise AuthError({"code": "invalid_claims",
                                "description":
                                    "incorrect claims,"
                                    "please check the audience and issuer"}, 401)
            except Exception:
                raise AuthError({"code": "invalid_header",
                                "description":
                                    "Unable to parse authentication"
                                    " token."}, 401)

            _request_ctx_stack.top.current_user = payload
            return f(*args, **kwargs)
        raise AuthError({"code": "invalid_header",
                        "description": "Unable to find appropriate key"}, 401)
    return decorated

The newly created requires_auth decorator, when applied to an endpoint, will automatically reject the request if no valid user can be authenticated.

How to require an authenticated request for an endpoint

We are ready to secure our endpoints, let’s update the user and admin endpoints to utilize our decorator.

@app.route("/user")
@requires_auth
def user_view():
    """
    User endpoint, can only be accessed by an authorized user
    """
    return jsonify(msg="Hello user!")

@app.route("/admin")
@requires_auth
def admin_view():
    """
    Admin endpoint, can only be accessed by an admin
    """
    return jsonify(msg="Hello admin!")

Our only change was adding @required_auth at the top of the declaration of each endpoint function, and with that we can test once again:

~ curl -i http://localhost:5000/user
HTTP/1.0 401 UNAUTHORIZED
Content-Type: application/json
Content-Length: 89
Server: Werkzeug/2.0.1 Python/3.9.1
Date: Tue, 24 Jan 2023 21:42:26 GMT

{"code":"authorization_header_missing","description":"Authorization header is expected"}

~ curl -i http://localhost:5000/admin
HTTP/1.0 401 UNAUTHORIZED
Content-Type: application/json
Content-Length: 89
Server: Werkzeug/2.0.1 Python/3.9.1
Date: Tue, 24 Jan 2023 21:42:42 GMT

{"code":"authorization_header_missing","description":"Authorization header is expected"}

As expected, we can’t access our endpoints as the authorization header is missing. But before we add one, let’s see if our public endpoint still works:

~ curl -i http://localhost:5000
HTTP/1.0 200 OK
Content-Type: application/json
Content-Length: 23
Server: Werkzeug/2.0.1 Python/3.9.1
Date: Tue, 24 Jan 2023 21:43:55 GMT

{"msg":"Hello world!"}

Awesome, it works as expected.

How to test it out

For testing our newly secured endpoints, we need to get a valid access token that we can pass to the request. We can do that directly on the Test tab on the API details page, and it’s as simple as copying a value from the screen:

Copying the token for testing

Once we have the token we can change our curl request accordingly:

~ curl -i -H "Authorization: bearer [ACCESS_TOKEN]"  http://localhost:5000/user
HTTP/1.0 200 OK
Content-Type: application/json
Content-Length: 22
Server: Werkzeug/2.0.1 Python/3.9.1
Date: Tue, 24 Jan 2023 22:17:06 GMT

{"msg":"Hello user!"}

Please remember to replace [ACCESS_TOKEN] with the value you copied from the dashboard.

It works! But we still have some work to do. Even though our /admin endpoint is secured, it can be accessed by any user:

~ curl -i -H "Authorization: bearer [ACCESS_TOKEN]"  http://localhost:5000/admin
HTTP/1.0 200 OK
Content-Type: application/json
Content-Length: 23
Server: Werkzeug/2.0.1 Python/3.9.1
Date: Tue, 24 Jan 2023 22:21:09 GMT

{"msg":"Hello admin!"}

Role-based access control

For role-based access control there’s a few things we need to do:

1. Create permissions for the API
2. Enable adding permissions to the JWT for the API
3. Update the code
4. Test with users

The first 2 points are very well explained in the Auth0 docs, so just make sure you add the corresponding permissions on your API.

Next, we need to update the code. We need a function to check if a given permission exists in the access token and return True if it does and False if it does not:

def requires_scope(required_scope):
    """
    Determines if the required scope is present in the Access Token
    Args:
        required_scope (str): The scope required to access the resource
    """
    token = get_token_auth_header()
    unverified_claims = jwt.get_unverified_claims(token)
    if unverified_claims.get("scope"):
            token_scopes = unverified_claims["scope"].split()
            for token_scope in token_scopes:
                if token_scope == required_scope:
                    return True
    return False

And lastly, it can be used as follows:

@app.route("/admin")
@requires_auth
def admin_view():
    """
    Admin endpoint, can only be accessed by an admin
    """
    if requires_scope("read:admin"):
        return jsonify(msg="Hello admin!")

    raise AuthError({
        "code": "Unauthorized",
        "description": "You don't have access to this resource"
    }, 403)

Now, only users with the permission read:admin can access our admin endpoint.

In order to test your final implementation, you can follow the steps detailed on obtaining an access token for a given user.

You can also use the Auth0 Dashboard to test permissions, but that is outside the scope of this article. If you would like to learn more about it, read here.

Conclusion

Today we learned how to secure a Flask API. We explored the do-it-yourself path, and we built a secure API with three levels of access – public access, private access and privately-scoped access.

There’s so much more that Auth0 can do for your APIs and also for your client applications. Today we just scratched the surface, and it’s up to you and your team when working with real-life scenarios to explore all the potential of their services.

The full code is available on GitHub.

Thanks for reading! If you like my teaching style, you can Subscribe to my weekly newsletter for developers and builders and get a weekly email with relevant content.

In this article, I am going to explain what Auth0 Actions are, why you'd want to use them, and how to set one up.

What are Auth0 Actions?

Actions are secure, tenant-specific, versioned functions written in Node.js that execute at certain points during the Auth0 runtime. Actions are used to customize and extend Auth0's capabilities with custom logic.

Above you can see a sample flow. In it, once the user logs into the system, you add a trigger to verify the user's identity using Onfido and then confirm consent using OneTrust before completing the login flow and issuing the token.

In brief, an action is a programmatic way to add custom business logic into your login flow.

Why use Auth0 Actions? 🤔

Extensibility – they're built to give developers more tooling and a better experience in their login workflows.

Drag N Drop Functionality – The flow editor lets you visually build custom workflows with drag and drop Action blocks for complete control.

Monaco Code Editor – Designed with developers in mind, you can easily write JavaScript functions with validation, intelligent code completion, and type definitions with TypeScript support.

Serverless Environment – Auth0 hosts your custom Action functions and processes them when desired. The functions are stored and run on their infrastructure.

Version Control – You have the ability to store a history of individual Action changes and the power to revert back to previous versions as needed.

Pre-Production Testing – Your personal Actions can be drafted, reviewed, and tested before deploying into production

How to Set Up Auth0 Actions

For the purposes of this demo, we are going to be creating an action to enforce Multi-Factor Authentication (MFA) for a specific role. I will take you through the process of:

1. Creating a role
2. Adding users
3. Setting up a demo application
4. Creating an Action to enforce MFA
5. Testing the code

Let's get started:

1) Login to Your Auth0 Account

The first step to secure your application is to access the Auth0 Dashboard in order to create your Auth0 application.

If you haven’t created an Auth0 account, you can sign up for a free one now.

2) Create an Application

Once in the dashboard, move to the Applications tab in the left sidebar.

Click on Create Application.

Provide a friendly name for your application (like Test Actions App) and choose Single Page Web Applications as an application type.

From the quick start tab choose React. Download the sample app. This will have most of the necessary details already in place.

We also need to set up a few settings for this application. Choose the Settings tab (next to quick start). Add your localhost URL to the following places:

1. Allowed Callback URLs
2. Allowed Logout URLs
3. Allowed Web Origins

3) Setup Application

Unzip the code we downloaded in a location of your choice. Then open it in the code editor of your choice.

Cross verify that the details of your application are correctly configured in src/auth_config.json.

We will run this code locally, so install the dependencies and run it in dev mode (so we have hot reload enabled). To do this, npm install & npm run dev.

Once the application starts you should be shown an SPA like below. If you click on Log In it will take you to your login box.

4) Setup Users and Roles

Click on the User Management tab in the left sidebar.

Go to the Users tab and click on the Create User button. We need to create 2 users:

1. Admin User
2. Test User

Remember these credentials as these are the test users we will use for this demo.

Go to the Roles tab and click on the Create Role button. Call the role Admin and, once it's created, go to the user tab and assign it to your Admin user.

Once this is done go back to your locally running SPA and try logging in with one credential. You should be able to access a user portal like below:

5) Setup Actions

Click on the Actions Tab in the left sidebar. Then go to the Flows category.

Select the Login Flow. This will run the flow of an action once the login process in your login box is complete.

Click on the + button in Add Action and select Build Custom.

Name it MFA for Role and leave the rest as is.

Once created, you'll come to a screen as follows:

Add the below code into the onExecutePostLogin function:

  if (event.authorization != undefined && event.authorization.roles.includes("Admin")) {
      api.multifactor.enable("any");
  };

On the left side you can see a play button. This is your testing environment inside the actions editor. You will find the event object in which you can test the actions flow by adding Admin to the authorization.roles array.

When you add the Admin role you should see a response with MFA like below. When it's not present you should get an empty array.

Click on save draft and deploy.

Go to the flow now and click on the custom actions tab on the right and you should be able to drag and drop the MFA for Roles action into the flow. Click on Apply so that this new flow will work with your login box.

You will also need to enable MFA on the Auth0 dashboard.

Open the Securities tab and choose multi-factor auth. In the next screen, enable One-time Password. This will let users use an application like Google Authenticator for a one-time password.

There are other factors you can enforce as well, like SMS or Email-based OTP, but for this demo we will be using just the one-time password.

In the policies section leave everything as is and save your changes.

6) Testing With Your Application

Now when you go to login on the locally running application, you should be triggered to do a MFA for the admin user. So let's test that.

Click on login and redirect to your login box. If you are logged in already, log out and then do the same.

Enter your admin users credentials:

Once the login goes through, you will be prompted to authenticate with your preferred authenticator app. I used google authenticator and entered my OTP.

You will then be asked to consent to share your user data with the application.

Once you accept the above, you should be logged in.

If you try the same flow with the test user, you will notice that you are directly logged in after the consent page and no MFA request was triggered.

This is because in our actions code, as shown below, you can see that we check to see if the user roles have the Admin role. If so, then we ask Auth0 to trigger am MFA workflow with any of the enabled MFA use cases of the tenant.

  if (event.authorization != undefined && event.authorization.roles.includes("Admin")) {
      api.multifactor.enable("any");
  };

Conclusion

Congrats! You have just created a custom Auth0 Actions flow and tested it. This was a simple example to help you understand what Auth0 Actions are, and how they can be built and used in your workflows.

There are many more complex flows you can build, and you can find some examples provided by Auth0 below. Just click on the trigger and you will find specific examples.

Sample Actions Code

Thanks for reading! I really hope that you find this article useful. If so, please share it so others can see it.

Thanks for reading! :)

P.S Do feel free to connect with me on LinkedIn or Twitter

Appendix

The following sources were really helpful in writing this article:

• Introducing Auth0 Actions - Auth0
• Auth0 Actions - Auth0 Docs

Auth0 is a flexible, drop-in solution to add authentication and authorization services to your applications. See how easy it is to add to your Vue application so you can register and login users with their email address and a password.

What we will be creating

We are going to create a very simple Vue application using the Vue CLI. We will modify the default scaffolded application so that we can use Auth0 to either register a new user or login an existing user. Once a user is logged in then they will have access to view the About page.

User’s will be able to register with the application using the email and password authentication system in Auth0.

Creating our Project

I will be using the Vue CLI to scaffold out a project for us to start with. To do that you need to have the Vue CLI installed on your system. If you DO NOT have it installed, you can install it globally with this command:

npm install -g @vue/cli

Now we can use the Vue CLI to create our project. Create a new project using this command:

vue create vue-authentication-auth0

You will be asked to pick a preset. Choose “Manually select features” and then select “babel”, “Router” and “Linter / Formatter”.

You will be asked if you want to use history mode for router. Choose “Yes” (should be the default).

You can select any linter you want but for this tutorial I will be selecting “Eslint + Prettier”.

After the Vue CLI is finished, it will give you the commands to change into the new directory that was just created and the command to start the server. Follow those directions. Once the server is started you can open your browser to localhost:8080. You should see this:

How to Set Up An Auth0 Account

The first thing you will need to do is to create an account with Auth0 if you don’t already have one. It is free to create an account. You can create your free account here.

How to Create our Auth0 Application

Once you have created your free Auth0 account, login to your account. In the left-hand navigation, click on Applications.

From here click on the Create Application button.

You will be presented with a dialog box for you to provide a name for your application and to specify what type of application you will be creating.

The name of my application is Vue Authentication Auth0. You can put whatever you want for the name of your application.

For the application type, select Single Page Web Application.

After your application is created, the Quick Start tab will provide instructions on how to implement Auth0 in your web App using the most popular JavaScript frameworks.

Since we are using Vue.js for our application click on the Vue icon.

Auth0 provides very detailed instructions on how to implement their Authentication-As-A-Service product. For this tutorial we will implement their instructions in the Vue app that we have already created.

How to Configure Your Application Settings

You can access your settings by clicking on the Settings tab at the top of the page.

You will see your Domain and Client ID under Basic Information. We will come back to this later on because we will need to store these values for our application to work.

Under the Application URIs section we will need to define our Allowed Callback URLs, Allowed Logout URLs, and Allowed Web Origins.

For testing our application locally we will be using the URL of http://localhost:8080.

NOTE: if you decide to host your application somewhere like on Netlify or Heroku then you will need to update all of these settings with the URL of your hosted application.

Set your strong>Allowed Callback URLs, Allowed Logout URLs, and Allowed Web Origins to be http://localhost:8080.

How to Install the Auth0 SDK

Go back to your Vue application and add the Auth0 Client SDK with this command:

npm install @auth0/auth0-spa-js

How to Create an Authentication Wrapper

The Auth0 SDK requires that it be initialized before your Vue application has started.

Vue has lifecycle hooks that we could potentially use to initialize the SDK. You might think we could use a beforeCreate hook in the App.vue file but that won't work. Let me show you why.

Here is an image of the Vue lifecycle hooks.

beforeCreate is the very first Vue lifecycle hook to fire. But notice in that image that it fires after the Vue application is created with new Vue().

We need to be able to initialize the Auth0 SDK before the new Vue() that creates our Vue application. Vue provides a mechanism to do this with the Vue plugin.

In order to use a plugin you must call it with the Vue.use() command. This command must be done before your start your app by calling new Vue().

The Authentication Wrapper we will be creating will actually be a Vue plugin.

In the src directory create a new directory called auth. Inside that auth directory create a file called index.js.

We will copy the code provided from the QuickStart tab and paste it into this file. Here is the code:

import Vue from "vue";
import createAuth0Client from "@auth0/auth0-spa-js";
/** Define a default action to perform after authentication */
const DEFAULT_REDIRECT_CALLBACK = () =>
  window.history.replaceState({}, document.title, window.location.pathname);
let instance;
/** Returns the current instance of the SDK */
export const getInstance = () => instance;
/** Creates an instance of the Auth0 SDK. If one has already been created, it returns that instance */
export const useAuth0 = ({
  onRedirectCallback = DEFAULT_REDIRECT_CALLBACK,
  redirectUri = window.location.origin,
  ...options
}) => {
  if (instance) return instance;
// The 'instance' is simply a Vue object
  instance = new Vue({
    data() {
      return {
        loading: true,
        isAuthenticated: false,
        user: {},
        auth0Client: null,
        popupOpen: false,
        error: null
      };
    },
    methods: {
      /** Authenticates the user using a popup window */
      async loginWithPopup(options, config) {
        this.popupOpen = true;
try {
          await this.auth0Client.loginWithPopup(options, config);
        } catch (e) {
          // eslint-disable-next-line
          console.error(e);
        } finally {
          this.popupOpen = false;
        }
this.user = await this.auth0Client.getUser();
        this.isAuthenticated = true;
      },
      /** Handles the callback when logging in using a redirect */
      async handleRedirectCallback() {
        this.loading = true;
        try {
          await this.auth0Client.handleRedirectCallback();
          this.user = await this.auth0Client.getUser();
          this.isAuthenticated = true;
        } catch (e) {
          this.error = e;
        } finally {
          this.loading = false;
        }
      },
      /** Authenticates the user using the redirect method */
      loginWithRedirect(o) {
        return this.auth0Client.loginWithRedirect(o);
      },
      /** Returns all the claims present in the ID token */
      getIdTokenClaims(o) {
        return this.auth0Client.getIdTokenClaims(o);
      },
      /** Returns the access token. If the token is invalid or missing, a new one is retrieved */
      getTokenSilently(o) {
        return this.auth0Client.getTokenSilently(o);
      },
      /** Gets the access token using a popup window */
getTokenWithPopup(o) {
        return this.auth0Client.getTokenWithPopup(o);
      },
      /** Logs the user out and removes their session on the authorization server */
      logout(o) {
        return this.auth0Client.logout(o);
      }
    },
    /** Use this lifecycle method to instantiate the SDK client */
    async created() {
      // Create a new instance of the SDK client using members of the given options object
      this.auth0Client = await createAuth0Client({
        ...options,
        client_id: options.clientId,
        redirect_uri: redirectUri
      });
try {
        // If the user is returning to the app after authentication..
        if (
          window.location.search.includes("code=") &&
          window.location.search.includes("state=")
        ) {
          // handle the redirect and retrieve tokens
          const { appState } = await this.auth0Client.handleRedirectCallback();
// Notify subscribers that the redirect callback has happened, passing the appState
          // (useful for retrieving any pre-authentication state)
          onRedirectCallback(appState);
        }
      } catch (e) {
        this.error = e;
      } finally {
        // Initialize our internal authentication state
        this.isAuthenticated = await this.auth0Client.isAuthenticated();
        this.user = await this.auth0Client.getUser();
        this.loading = false;
      }
    }
  });
return instance;
};
// Create a simple Vue plugin to expose the wrapper object throughout the application
export const Auth0Plugin = {
  install(Vue, options) {
    Vue.prototype.$auth = useAuth0(options);
  }
};

How to Create a Config File

The options object passed to the plugin is used to provide the values for clientId and domain which I mentioned earlier and said we would get to later.

In the root directory of your application create a new file called auth_config.json. We will populate the values from your application for domain and clientId. Put this code into auth_config.json file and be sure to update it with the values for your application.

{   
  "domain": "yourAppValuesHere",   
  "clientId": "yourAppValuesHere"
}

This configuration file contains non-sensitive values relating to your Auth0 application. This file should not be committed into source control. We can do that by adding the filename to the .gitignore file.

Open the .gitignore file and add auth_config.json in the file.

How to Add the Plugin to Our Vue Application

Now that we have created our plugin we need to tell Vue to use it. Open up the main.js file. Add these two import statements which import our plugin as well as our domain and clientId from the auth_config.json file.

// Import the Auth0 configuration
import { domain, clientId } from "../auth_config.json";
// Import the plugin here
import { Auth0Plugin } from "./auth";

Next we need to tell Vue to use our plugin. After the import statements add this code:

// Install the authentication plugin here
Vue.use(Auth0Plugin, {
  domain,
  clientId,
  onRedirectCallback: appState => {
    router.push(
      appState && appState.targetUrl
        ? appState.targetUrl
        : window.location.pathname
    );
  }
});

How to Login to the App

If you look at the plugin code in the auth/index.js file you will notice that there are two different login methods provided: loginWithPopup and loginWithRedirect.

Auth0 provides a hosted login page that any application can use to login or register users for their application.

The loginWithRedirect method will access the hosted login page. That means that when users click the login button the URL will change to point to the Auth0 website where the user will enter their login details. After they have successfully authenticated they will be redirected back to our application.

If we don’t want to do this redirect, Auth0 provides the option to login or register users via a popup that shows on our website.

I will show you how to use both of these login methods.

Open up the App.vue file. The nav currently has two entries for the Home and About pages. We need to add two buttons to Login. Add this code in the nav which should look like this:

<div id="nav">
  <router-link to="/">Home </router-link>|
  <router-link to="/about">About</router-link> |
  <div v-if="!$auth.loading">
    |
    <button @click="login" v-if="!$auth.isAuthenticated">
      Login
    </button>
    |
    <button @click="loginPopup" v-if="!$auth.isAuthenticated">
      Login Popup
    </button>
    |</div>
</div>

Notice that the buttons are wrapped in a directive that makes sure $auth.loading is false. If you review the code for our plugin there is a data section with a value of isAuthenticated. This value is set if a user successfully authenticates with Auth0. If the user is authenticated then we do not want to show the two login buttons.

When we add the div then the buttons appear on the row below the links for the Home and About button. I want them to all be on the same line so I update the CSS styles to be this:

#nav { 
  display: flex; 
  justify-content: center; 
  padding: 30px; 
} 
#nav a { 
  font-weight: bold; 
  color: #2c3e50; 
  padding: 0 5px; 
}

Now when you view the application you will see the two buttons.

The two buttons are calling methods login and loginPopup. Let’s implement them now.

Add a methods object with two methods. Here is the code:

methods: { 
  login() { 
    this.$auth.loginWithRedirect(); 
  }, 
  loginPopup() { 
    this.$auth.loginWithPopup(); 
  }, 
}

The this.$auth is a handle for our plugin. We are then calling the methods available in our plugin.

Now go back to your application. If you click the login button you should be taken to Auth0’s hosted login page.

If you click on the Login Popup button you will see a login modal in your application.

Regardless of which one you choose, you will see that you have the option to either log in or sign up. Go ahead and create an account. When you return to the application you will see that both the login buttons are hidden. They are hidden because the isAuthenticated value in the plugin is now true.

How to Implement Logout

The next step is to implement a Logout. Open up the App.vue file. Add a button for logout like this:

<button @click="logout" v-if="$auth.isAuthenticated">
  Logout
</button>

Here we have a directive to only show this button if the user is currently authenticated. Go back to your application and you should now see the Logout button.

Add this method to implement the logout functionality:

logout() { 
  this.$auth.logout(); 
  this.$router.push({ path: '/' }); 
}

In this method we call the logout function in our plugin. In case the user was on a page that is only visible to users that are authenticated, we redirect the user to the home page.

How to Only Show Pages to Authenticated Users

Currently our application on has a Home page and an About page. Instead of creating a new page, let’s set the About page to be only visible if a user is logged in.

We only want to show the About page in the nav if the user is logged in. We will take the same directive we use for displaying the Logout button and put it on the About page in the nav. Update the nav to be this:

<router-link v-if="$auth.isAuthenticated" to="/about">About</router-link>

How to Add a Route Guard

We have hidden the link to the About page in the nav if a user is not currently authenticated. But a user can type in the url /about to go directly to the page. This shows that an unauthenticated user can access that page. You can avoid this by using a route guard.

In the auth directory create a new file called authGuard.js.

Add this code to the file:

import { getInstance } from "./index";
export const authGuard = (to, from, next) => {
  const authService = getInstance();
const fn = () => {
    // If the user is authenticated, continue with the route
    if (authService.isAuthenticated) {
      return next();
    }
// Otherwise, log in
    authService.loginWithRedirect({ appState: { targetUrl: to.fullPath } });
  };
// If loading has already finished, check our auth state using `fn()`
  if (!authService.loading) {
    return fn();
  }
// Watch for the loading property to change before we check isAuthenticated
  authService.$watch("loading", loading => {
    if (loading === false) {
      return fn();
    }
  });
};

This code checks to see if the user is currently authenticated. If they are not it brings up the Auth0 hosted login page for the user to login. If the user fails to login or is not able to successfully login, then it redirects the user away from the page they were trying to access that has the route guard.

Now let’s implement this route guard in our Vue router. Open up the index.js file in the router directory.

At the top of the file add an import for the authGuard file we just created:

import { authGuard } from "../auth/authGuard";

Next we need to add the route guard to the /about route. Update the /about route to be this:

{ 
  path: '/about', 
  name: 'About', 
  component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'), 
  beforeEnter: authGuard 
}

Go back to your application. If you are not currently authenticated then login to your application. You should see the About entry in the Nav. Now logout of the application. Manually try to go the url /about. You should be redirected to the Auth0 hosted login page.

Congratulations! You have successfully added Auth0 authentication to your Vue application.

Get The Code

I have the complete code in my GitHub account here. If you get the code please do me a favor and star my repo. Thank you!

Using Other Authentication Methods

I have written several follow up articles on adding Authentication to your Vue application using other authentication methods.

Want to use Firebase for authentication, read this article.

Want to use AWS Amplify for authentication, read this article.

Conclusion

Auth0 is an Authentication-As-A-Service product that you can add to your application. It provides very easy to use Authentication.

Hope you enjoyed this article. If you like it please share it. Thanks for reading. And you can read more of my tutorials on my personal website.

TL;DR

GatsbyJS is a framework that uses GraphQL and ReactJS to enable you to create feature-rich, super fast and dynamic web apps. It gives you the ability to consume data from virtually anywhere and use them in your app. In this tutorial, I’ll be showing you how to use Auth0 which is an authentication and authorization platform to add authentication to your GatsbyJS application and to your serverless function on Netlify.

I’ll assume you have at least a basic understanding of React, Node, and GraphQL.

Here’s the Github Repository if you want to take a look at the source code.

Enter GatsbyJS.

Created in 2015, Gatsby is a simple way to build a website with React. Today, Gatsby is known to be used to build websites like blogs, portfolio pages, and even e-commerce applications. Gatsby sites are known for being blazingly fast, and that is because when you build a website using Gatsby, it comes with tons of performance optimizations out-the-box, unlike some other frontend frameworks that leave you to figure out how to make your website more performant. Gatsby’s secret to being fast is in the fact that it follows the PRPL architectural pattern, which stands for:

• Push critical resources for the initial URL route using <link preload>and http/2.
• Render initial route.
• Pre-cache remaining routes.
• Lazy-load and create remaining routes on demand.

It is a pattern developed by Google for structuring and serving Progressive Web Apps (PWAs), with an emphasis on the performance of app delivery and launch. You can read more about this pattern here.

What is Auth0?

Auth0, pronounced as “Auth Zero” is a robust authentication and authorization platform. It makes it super easy to do add things like user registration, password retrieval, sign in, social login, multi-factor authentication, enterprise login, single sign-on, and more, into your production application.

Auth0 pays close attention to the developer’s experience with their excellent blogs posts and robust and easy to understand documentation. With Auth0 you can make use of various identity standards:

• OAuth 1
• OAuth 2
• Open ID Connect
• JSON Web Tokens (JWT)
• Security Assertion Markup Language (SAML)
• WS-Federation

In this tutorial, we’ll focus on using a combination of JSON Web Tokens and Social logins with OAuth 2.

Serverless Functions and Netlify.

Netlify is a platform that lets you deploy your project without worrying about certain overheads like Continuous Deployment, HTTP Certs, and more, created as a way to deploy and manage static websites that don’t have a backend.

Now, because not everyone wants to deploy a static website and there’s the need for support for a backend, Netlify added a feature called “Serverless functions” which are backends where you don’t have to worry about the server infrastructure.

Behind the scenes, Netlify functions stand between you and something called Amazon Web Services (AWS) Lambda which is where the real “serverless” happens, and it lives on Amazon’s AWS cloud platform. Netlify functions help simplify things for you, so you don’t have to deal directly with AWS and also be able to keep using all of Netlify’s other cool features like Continuous Deployment.

The word “serverless” doesn’t imply without a server; it means that you as a developer need not worry about the server infrastructure (physical and otherwise).

You can read more about Netlify and their Serverless Functions.

Our App: Micro Blog.

Our app is called “Micro Blog”. It’s a platform that allows users to create short, frequent posts. Each post contains some text content, username and profile image of the person making the post.

Anyone can open the web app and view posts of every other person, but to make a post themselves, they need to log in. The app supports social logins and an email login.

If you are already familiar with most of this stuff and want to see the code, you can head over to the source code on Github.

Building the Front-End.

Our front-end is a GatsbyJS app, and that means the first thing we need to do is install the Gatsby CLI node package from npm.

Note: Use node version “>= 6.9.0 <7.0.0 || >= 8.9.0” else you get an error when you try to create a new Gatsby site, this is because of the dependency “css-loader@1.0.1”.

# install the Gatsby CLI globallynpm install -g gatsby-cli

# create a new Gatsby site using the default startergatsby new micro-blog

After the commands are done running, you should be able to enter into the directory called “micro-blog”, relative to where you executed the commands above.

cd micro-blog

When you take a look at the contents of this directory, you’ll find a ton of generated content. At this point, you can fire up your Gatsby site and see it working. To do that, in your terminal run this:

gatsby develop

This will start up your Gatsby site on [http://localhost:8000/](http://localhost:8000/).

Next step is to add and modify content specific to our application.

We’ll start with gatsby-config.js. Replace the contents of the file with:

You might want to update the “” author placeholder value.

This file contains your Gatsby app settings, stuff like your site metadata and plugins. It’s a pretty important file Gatsby looks for when you start up your app. Within the app, we can use GraphQL to query the contents of this file.

Up next, src/components/header.js:

This file is our shared header component. Now, a few things are going on here:

• We are importing some things from gatsby library: Link and navigate. Link is a React component used to link to other pages that are within your app like “/app/home”, while navigate is a function that accepts a URL and programmatically navigates the user to the specified URL.
• isLoggedIn, logout, and getUserNickname are methods that check if the user is logged in, log out the user, and get a logged in user’s nickname for display purposes, respectively.
• Button is a component that displays a button element for the user. It accepts several props that help us easily give the button varying looks.

Here’s what Button looks like:

As you’ll see, we are going to be making use of Styled Components a lot and specifically emotion, which is one of the many supported CSS-in-JS packages for GatsbyJS.

Later, we will take a look at src/services/auth.js.

Next important file to look at is /src/components/layout.js:

This file is the wrapper file for our application. It includes the header, a footer, and renders children passed to it. We also see the imported graphql package from gatsby alongside StaticQuery component. StaticQuery accepts a query prop which is a GraphQL query. Whatever value resolved from the query is made available in the StaticQuery component’s render prop.

Taking a closer look at the query, we can see that it’s getting data from the gatsby-config.js file.

Our accompanying CSS /src/components/layouts.css stays almost the same with the generated one with the only difference being from line 8:

body {

   margin: 0;

   background-color: #f2f9ff;

}

Let’s leave the /src/components directory for now and take a look at /src/pages/index.js :

All files in /src/pages/ become pages in your Gatsby App. For example, index.js becomes the homepage and /src/pages/app/home.js becomes [http://yourdomain.com/app/home](http://yourdomain.com/app/home).

On our homepage, we want our users to see the recent posts and ask them to log in or sign up if they want to create a post.

To get our recent posts, we need axios, which is a promise-based library for making network requests in JavaScript. Install axios by running this in your terminal:

npm install axios

When our component mounts, we check if the user is logged in and we redirect them to /app/home because we don’t want them being on this page if they are logged in. Admittedly, this is a pretty naïve approach, and we could make use of “Protected Routes” instead. Using “Protected Routes” means that this component will not even get the chance to be mounted at all. Due to the small size of this project, I’ve decided not to make use of Protected Routes.

In case you want to implement Protected Routes in your Gatsby App, please refer to this guide on the official Gatsby website.

We create a request to get the posts when our component mounts and then update the state with the returned data. Updating the state causes our component re-render the childRecentPosts component since it makes use of the said state.

Notice that the URI in the network request to fetch the posts data is an environment variable process.env.API_URI. These environment variables aren’t the typical environment variables you find in a Node app. To create these environment variables, you need two files in your Gatsby application root directory: env.production and env.development. These files will be automatically loaded by Gatsby in the appropriate environment when you start up your app.

As I mentioned earlier, these environment variables aren’t the same with your Node environment variables and what makes them different is that they aren’t private files that you typically exclude in your .gitignore file. You have to push these files when you want to deploy your app because GatsbyJS will need to read these files on startup.

Mine looks something like:

AUTH0_DOMAIN=micro-blog.auth0.com

AUTH0_CLIENTID=cIovhIQvYOr6fk3yhDtKjB5EiIvLevxf

REDIRECT_URI='http://localhost:8000/callback'

API_URI='http://localhost:9000/.netlify/functions/'

In production, it’s a bit different:

AUTH0_DOMAIN=micro-blog.auth0.com

AUTH0_CLIENTID=cIovhIQvYOr6fk3yhDtKjB5EiIvLevxf

REDIRECT_URI='https://angry-shaw-7a81ce.netlify.com/callback'

API_URI='https://angry-shaw-7a81ce.netlify.com/.netlify/functions/'

In order to get these values for your own app, you need to create an Auth0 account if you don’t already have one.

Note that you can use Auth0 for free with limited features.

After you’ve created an account, log in to your Auth0 management dashboard and create a new Auth0 Application. You can do that by clicking on the Applications menu item and then the Create Application button. You can update the application name from “My App” to whatever else you want to use. You can change this later if you wish. In my case, I use “Micro Blog”.

Next, you select “Single Page Web App” and click on Create. This will immediately create your application.

Once you are done with creating your application, you should navigate to “Settings”, there you will find your **AUTH0_CLIENTID** and **AUTH0_DOMAIN** values.

Note: For your .env.production, you don’t have the **REDIRECT_URI** and **API_URI** at this point. Later on, after we create our Netlify app, we will get the application URL which we can then put in there appropriately.

Now, let’s take a look at src/components/recentPosts.js:

Again, here we make use of Styled Components. We also make use of a React lifecycle method shouldComponentUpdate to prevent unnecessary re-renders when the RecentPosts component is used in another component.

When a user clicks on the login button, we navigate the user to an Auth0 login page. After they have been authenticated, we redirect the user to a URL in our app called /callback where we check that the user has been logged in properly and then save their details in localStorage. Here’s what the /callback page looks like:

We call the handleAuthentication method which will get data from the URL, parse it, save the extracted data to localStorage and then call the () => naviage('/app/home') method to redirect the user to the main app.

Now, we take a look at the /pages/app/home.js page, where only logged in users can access:

There isn’t much that is new here. The only things I’d mention are:

• We create new posts in the handlePostSubmit method and in there, we make a regular axios call but with a headers option containing the JWT token “id_token”. We do that because, in our Serverless Function, we will be needing that value in the headers to authenticate a request, making sure that only a logged in user can create a new post and that the token saved on the client side is actually valid and not tampered with. This greatly improves the security and reliability of our app.
• We redirect the user to / when they aren’t logged in properly and they manage to land on this page. We do that in the componentDidMount lifecycle method. Again, Protected Routes are a better option in your production apps.

Finally, we get to /src/services/auth.js. We have been using functions from this file throughout the app, it’s time to take a look at it:

In this file we use auth0-js a JavaScript library by Auth0 to handle the authentication parts of our app. Add it to your app by running this in your terminal:

npm install auth0-js

Next thing you see in this file is the creation of isBrowser which states if our file is currently being executed within the context of a browser. This is important because during the build process you might run into errors trying to call things like window.localStorage.

Let’s take a look at some of the methods in this file:

The getUser method gets the user details from the access token previously stored in the localStorage, after our user has been logged in. It uses the getAccessToken method to fetch the access token stored.

The handleLogin method is called when the user tries to log in. It redirects them to the Auth0 login page which in turn redirects the user to /callback once they’ve been logged in.

The isLoggedIn method checks that the JWT token “id_token” expiration date saved in localStorage as expiresAt hasn’t been exceeded, thereby invalidating the user’s session.

The handleAuthentication method is what you see being used in the /callback page. This method parses the URL hash and gets important values which we later save in localStorage in the setSession method.

Finally, the logout method logs the user out by deleting saved credentials. This works well but you could take it a step further by calling an endpoint on Auth0 which will invalidate the session completely. I stopped here for the sake of this tutorial.

Finally, we update line 6 on /src/components/seo.js:

const SEO = ({ description = null, lang = "eng", meta = [], keywords = [], title }) => {

Making it use an ES6 arrow function and default values.

Building the Back-End.

Next, we are going to build an API to serve a list of posts and to collect new posts. They are serverless functions hosted on Netlify. Our API needs to do a few things:

• Have an endpoint to serve the list of posts: /.netlify/functions/postsRead.
• Have an endpoint to collect new posts: /.netlify/functions/postsCreate.
• Authenticate requests to create new posts using Auth0.

To get started, we need to install a few npm packages:

npm install netlify-lambda mongoose jwks-rsa jsonwebtoken dotenv

Next step is to create a directory called utils in the root directory of our Gatsby App. Inside that directory is where our files that aren’t quite the API will live. One of such files is our /utils/db.js file:

In this file, we establish a connection to our MongoDB database.

Something missing here is our .env file (yes, a third one!). Mine looks something like this:

DATABASE_PROD='mongodb://<username>:<password>@<db_url>'DATABASE_DEV='mongodb://localhost:27017/micro-blog'

I use mLab to host my database online and I have MongoDB installed on my development machine. You can follow this guide to install MongoDB on your development machine too.

The next file to focus on is /utils/index.js, this file contains some other methods we will make use of in our Netlify functions.

The first method respondWith is abstracting the logic of responding to requests that get to our Netlify functions. And the second method verifyToken is verifying that the tokens sent in the headers of requests are valid.

Finally, into the Netlify functions. Create a new directory in your application root called functions (or anything else you find appealing) and in that directory, create three files:

• postsCreate.js
• postsRead.js
• postsModel.js

The first two files will hold our implementation for creating and reading posts while the last file will describe our Posts Database Schema.

Here’s what the postsModel.js looks like:

And postsCreate.js:

Lastly, postsRead.js:

Now, to run our functions locally, we first create a new script in our package.json file:

"scripts": {// other scripts

"start:lambda": "NODE_ENV=development netlify-lambda serve functions"

}

I use “serve functions” because the “functions” directory is where I put my Netlify functions, yours could be different.

After creating that script, we run it in our terminal:

npm run start:lambda

Deploying the App.

The last thing we will do is to deploy our app to Netlify and to do that we need to first create a file on our application root called netlify.toml. This file is a configuration file which Netlify will read while trying to build and deploy the app. Here’s what that file looks like:

[build]  functions = "lambda"  Command = "npm run prod"

The functions = lambda instructs Netlify put the built functions in a folder called “lambda”. And the Command = "npm run prod" specifies a script to run in order to build the entire app. This is pretty important because we need to build both our Gatsby App and our Netlify functions. Here’s what that script looks like in our package.json:

"scripts": {

// previous scripts

"build:lambda": "netlify-lambda build functions",

"prod": "NODE_ENV=production npm run build; npm run build:lambda"

Here, we first run npm run build which builds our Gatsby App and then run npm run build:lambda which builds our Netlify functions. Again, here I use “functions” because that is the name of the folder where I put my Netlify functions.

After doing all that, we create a new Github Repository and push our code there. Create a new Netlify account if you don’t already have one. I prefer using the Github signup option in this case. When you are logged in, you click on the New site from Git button which will then take you through the process of creating a new Netlify app.

If during the process of creating a new Netlify app, you don’t find your repository in the list shown, be sure that you have given Netlify access to all your repositories or at least that repository in particular.

Before you deploy, click on the Show Advanced button and create a new variable called DATABASE_PROD, setting the value to what’s in your .env file. Remember that this file is excluded from your app in your .gitignore so there’s no way for your app to read this value unless you do this.

Also, add public/ as the Publish directory since that is the directory where Gatsby builds and dumps the files.

Netlify will automatically handle deploying the Functions. After the app has been deployed, you should see the URL of your app on your dashboard.

And now that you have the app URL, you can update your .env.production file accordingly.

Thanks for reading!