Auth0 allows you to add authentication to almost any application type quickly. This guide demonstrates how to integrate Auth0, add authentication, and display user profile information in a Single-Page Application (SPA) that uses plain JavaScript, using the Auth0 SPA SDK.To use this quickstart, you’ll need to:
  • Sign up for a free Auth0 account or log in to Auth0.
  • Have a working project that you want to integrate with. Alternatively, you can view or download a sample application after logging in.
This quickstart assumes you are adding Auth0 to a plain JavaScript application, as opposed to using a framework such as React or Angular.
1

Configure Auth0

To use Auth0 services, you’ll need to have an application set up in the Auth0 Dashboard. The Auth0 application is where you will configure how you want authentication to work for the project you are developing.

​
Configure an application

Use the interactive selector to create a new Auth0 application or select an existing application that represents the project you want to integrate with. Every application in Auth0 is assigned an alphanumeric, unique client ID that your application code will use to call Auth0 APIs through the SDK.Any settings you configure using this quickstart will automatically update for your Application in the Dashboard, which is where you can manage your Applications in the future.If you would rather explore a complete configuration, you can view a sample application instead.

​
Configure Callback URLs

A callback URL is a URL in your application that you would like Auth0 to redirect users to after they have authenticated. If not set, users will not be returned to your application after they log in.
If you are following along with our sample project, set this to http://localhost:3000.

​
Configure Logout URLs

A logout URL is a URL in your application that you would like Auth0 to redirect users to after they have logged out. If not set, users will not be able to log out from your application and will receive an error.
If you are following along with our sample project, set this to http://localhost:3000.

​
Configure Allowed Web Origins

An Allowed Web Origin is a URL that you want to be allowed to access to your authentication flow. This must contain the URL of your project. If not properly set, your project will be unable to silently refresh authentication tokens, so your users will be logged out the next time they visit your application or refresh a page.
If you are following along with our sample project, set this to http://localhost:3000.
2

Add the Auth0 SPA SDK

Auth0 provides a SPA SDK (auth0-spa-js) to simplify the process of implementing Auth0 authentication and authorization in JavaScript applications. You can install the Auth0 SPA SDK as an NPM package or from the CDN. For the purpose of this quickstart, we will use the CDN. Include this script tag on your HTML page:
<script src="https://cdn.auth0.com/js/auth0-spa-js/2.0/auth0-spa-js.production.js"></script>
3

Create the Auth0 client

Create a new instance of the Auth0 client provided by the Auth0 SPA SDK and provide the Auth0 application details you created earlier in this quickstart.If a user has previously logged in, the client will refresh the authentication state on page load; the user will still be logged in once the page is refreshed.
app.js
auth0.createAuth0Client({
  domain: "dev-s3674bdouue0bd73.us.auth0.com",
  clientId: "QqpqsvIQHjLodaUIPpabJcIHoG41tbAv",
  authorizationParams: {
    redirect_uri: window.location.origin
  }
}).then(async (auth0Client) => {
  // Assumes a button with id "login" in the DOM
  const loginButton = document.getElementById("login");

  loginButton.addEventListener("click", (e) => {
    e.preventDefault();
    auth0Client.loginWithRedirect();
  });

  if (location.search.includes("state=") && 
      (location.search.includes("code=") || 
      location.search.includes("error="))) {
    await auth0Client.handleRedirectCallback();
    window.history.replaceState({}, document.title, "/");
  }

  // Assumes a button with id "logout" in the DOM
  const logoutButton = document.getElementById("logout");

  logoutButton.addEventListener("click", (e) => {
    e.preventDefault();
    auth0Client.logout();
  });

  const isAuthenticated = await auth0Client.isAuthenticated();
  const userProfile = await auth0Client.getUser();

  // Assumes an element with id "profile" in the DOM
  const profileElement = document.getElementById("profile");

  if (isAuthenticated) {
    profileElement.style.display = "block";
    profileElement.innerHTML = `
            <p>${userProfile.name}</p>
            <img src="${userProfile.picture}" />
          `;
  } else {
    profileElement.style.display = "none";
  }
});
4

Add login to your application

Now that you have configured your Auth0 Application, added the Auth0 SPA SDK, and created the Auth0 client, you need to set up login for your project. To do this, you will use the SDK’s loginWithRedirect() method to redirect users to the Auth0 Universal Login page where Auth0 can authenticate them. After a user successfully authenticates, they will be redirected to the callback URL you set up earlier in this quickstart.Create a login button in your application that calls loginWithRedirect() when selected.
Checkpoint
You should now be able to log in to your application.Run your application, and select the login button. Verify that:
  • you can log in or sign up using a username and password
  • your application redirects you to the Auth0 Universal Login page
  • you are redirected to Auth0 for authentication
  • Auth0 successfully redirects back to your application after authentication
  • you do not receive any errors in the console related to Auth0
app.js
auth0.createAuth0Client({
  domain: "dev-s3674bdouue0bd73.us.auth0.com",
  clientId: "QqpqsvIQHjLodaUIPpabJcIHoG41tbAv",
  authorizationParams: {
    redirect_uri: window.location.origin
  }
}).then(async (auth0Client) => {
  // Assumes a button with id "login" in the DOM
  const loginButton = document.getElementById("login");

  loginButton.addEventListener("click", (e) => {
    e.preventDefault();
    auth0Client.loginWithRedirect();
  });

  if (location.search.includes("state=") && 
      (location.search.includes("code=") || 
      location.search.includes("error="))) {
    await auth0Client.handleRedirectCallback();
    window.history.replaceState({}, document.title, "/");
  }

  // Assumes a button with id "logout" in the DOM
  const logoutButton = document.getElementById("logout");

  logoutButton.addEventListener("click", (e) => {
    e.preventDefault();
    auth0Client.logout();
  });

  const isAuthenticated = await auth0Client.isAuthenticated();
  const userProfile = await auth0Client.getUser();

  // Assumes an element with id "profile" in the DOM
  const profileElement = document.getElementById("profile");

  if (isAuthenticated) {
    profileElement.style.display = "block";
    profileElement.innerHTML = `
            <p>${userProfile.name}</p>
            <img src="${userProfile.picture}" />
          `;
  } else {
    profileElement.style.display = "none";
  }
});
5

Handle the callback from Auth0

When the browser is redirected back to your application process, your application should call the handleRedirectCallback() function on the Auth0 client only when it detects a callback from Auth0. One way to do this is to only call handleRedirectCallback() when code and state query parameters are detected.If handling the callback was successful, the parameters should be removed from the URL so the callback handler will not be triggered the next time the page loads.
Checkpoint
Your callback from Auth0 should now be properly handled.Run your application, and select the login button again. Verify that:
  • Auth0 successfully redirects back to your application after authentication.
  • the query parameters are removed from the URL.
app.js
auth0.createAuth0Client({
  domain: "dev-s3674bdouue0bd73.us.auth0.com",
  clientId: "QqpqsvIQHjLodaUIPpabJcIHoG41tbAv",
  authorizationParams: {
    redirect_uri: window.location.origin
  }
}).then(async (auth0Client) => {
  // Assumes a button with id "login" in the DOM
  const loginButton = document.getElementById("login");

  loginButton.addEventListener("click", (e) => {
    e.preventDefault();
    auth0Client.loginWithRedirect();
  });

  if (location.search.includes("state=") && 
      (location.search.includes("code=") || 
      location.search.includes("error="))) {
    await auth0Client.handleRedirectCallback();
    window.history.replaceState({}, document.title, "/");
  }

  // Assumes a button with id "logout" in the DOM
  const logoutButton = document.getElementById("logout");

  logoutButton.addEventListener("click", (e) => {
    e.preventDefault();
    auth0Client.logout();
  });

  const isAuthenticated = await auth0Client.isAuthenticated();
  const userProfile = await auth0Client.getUser();

  // Assumes an element with id "profile" in the DOM
  const profileElement = document.getElementById("profile");

  if (isAuthenticated) {
    profileElement.style.display = "block";
    profileElement.innerHTML = `
            <p>${userProfile.name}</p>
            <img src="${userProfile.picture}" />
          `;
  } else {
    profileElement.style.display = "none";
  }
});
6

Add logout to your application

Users who log in to your project will also need a way to log out. The Auth0 client provides a logout() method that you can use to log a user out of your app. When users log out, they will be redirected to your Auth0 logout endpoint, which will then immediately redirect them to your application and the logout URL you set up earlier in this quickstart.Create a logout button in your application that calls logout() when selected.
The SDK exposes an isAuthenticated() function that allows you to check whether a user is authenticated or not. You can render the login and logout buttons conditionally based on the value of the isAuthenticated() function. Alternatively, you can use a single button to combine both login and logout buttons as well as their conditional rendering.
Checkpoint
You should now be able to log out of your application.Run your application, log in, and select the logout button. Verify that:
  • you are redirected to Auth0’s logout endpoint.
  • Auth0 successfully redirects back to your application and the correct logout URL.
  • you are no longer logged in to your application.
  • you do not receive any errors in the console related to Auth0.
app.js
auth0.createAuth0Client({
  domain: "dev-s3674bdouue0bd73.us.auth0.com",
  clientId: "QqpqsvIQHjLodaUIPpabJcIHoG41tbAv",
  authorizationParams: {
    redirect_uri: window.location.origin
  }
}).then(async (auth0Client) => {
  // Assumes a button with id "login" in the DOM
  const loginButton = document.getElementById("login");

  loginButton.addEventListener("click", (e) => {
    e.preventDefault();
    auth0Client.loginWithRedirect();
  });

  if (location.search.includes("state=") && 
      (location.search.includes("code=") || 
      location.search.includes("error="))) {
    await auth0Client.handleRedirectCallback();
    window.history.replaceState({}, document.title, "/");
  }

  // Assumes a button with id "logout" in the DOM
  const logoutButton = document.getElementById("logout");

  logoutButton.addEventListener("click", (e) => {
    e.preventDefault();
    auth0Client.logout();
  });

  const isAuthenticated = await auth0Client.isAuthenticated();
  const userProfile = await auth0Client.getUser();

  // Assumes an element with id "profile" in the DOM
  const profileElement = document.getElementById("profile");

  if (isAuthenticated) {
    profileElement.style.display = "block";
    profileElement.innerHTML = `
            <p>${userProfile.name}</p>
            <img src="${userProfile.picture}" />
          `;
  } else {
    profileElement.style.display = "none";
  }
});
7

Show user profile information

Now that your users can log in and log out, you will likely want to be able to retrieve the profile information associated with authenticated users. For example, you may want to be able to personalize the user interface by displaying a logged-in user’s name or profile picture.The Auth0 SPA SDK provides user information through the getUser() function exposed by the Auth0 client. The Auth0 client also exposes an isAuthenticated() function that allows you to check whether a user is authenticated or not, which you can use to determine whether to show or hide UI elements, for example. Review the code in the interactive panel to see examples of how to use these functions.
Checkpoint
You should now be able to view user profile information.Run your application, and verify that:
  • user information displays correctly after you have logged in.
  • user information does not display after you have logged out.
app.js
auth0.createAuth0Client({
  domain: "dev-s3674bdouue0bd73.us.auth0.com",
  clientId: "QqpqsvIQHjLodaUIPpabJcIHoG41tbAv",
  authorizationParams: {
    redirect_uri: window.location.origin
  }
}).then(async (auth0Client) => {
  // Assumes a button with id "login" in the DOM
  const loginButton = document.getElementById("login");

  loginButton.addEventListener("click", (e) => {
    e.preventDefault();
    auth0Client.loginWithRedirect();
  });

  if (location.search.includes("state=") && 
      (location.search.includes("code=") || 
      location.search.includes("error="))) {
    await auth0Client.handleRedirectCallback();
    window.history.replaceState({}, document.title, "/");
  }

  // Assumes a button with id "logout" in the DOM
  const logoutButton = document.getElementById("logout");

  logoutButton.addEventListener("click", (e) => {
    e.preventDefault();
    auth0Client.logout();
  });

  const isAuthenticated = await auth0Client.isAuthenticated();
  const userProfile = await auth0Client.getUser();

  // Assumes an element with id "profile" in the DOM
  const profileElement = document.getElementById("profile");

  if (isAuthenticated) {
    profileElement.style.display = "block";
    profileElement.innerHTML = `
            <p>${userProfile.name}</p>
            <img src="${userProfile.picture}" />
          `;
  } else {
    profileElement.style.display = "none";
  }
});

​
Next Steps

Excellent work! If you made it this far, you should now have login, logout, and user profile information running in your application.

This concludes our quickstart tutorial, but there is so much more to explore. To learn more about what you can do with Auth0, check out:
  • Auth0 Dashboard - Learn how to configure and manage your Auth0 tenant and applications
  • auth0-flutter SDK - Explore the SDK used in this tutorial more fully
  • Auth0 Marketplace - Discover integrations you can enable to extend Auth0’s functionality