Shreya Gupta

Shreya is the Developer Advocate for Auth0 for Startups. She previously founded a non-profit called Bit Project, worked at a YC-backed Startup as a Developer Advocate, and currently hosts The Developer Diaries podcast. Through each experience, she has found her love for building resources and tools that help move the needle for developers. Outside of work, she enjoys traveling, watching K-Dramas, and drinking boba.

Developer Advocate, Startups

How to authenticate and manage your business users in a multi-tenant app with Organizations.

<div class="alert alert-info alert-icon">
  <i class="icon-budicon-487"></i>
  <b>This tutorial uses the Auth0 Organizations feature, which is <a href="https://auth0.com/startups/vip"> available to early-stage startups </a>through our Auth0 for Startups program, free for one year.</b><br> 
</div>

## The Challenge

Developers on a tight schedule need to quickly implement a secure solution. You need to build a product with scalable infrastructure that can be iterated on weeks/months/years down the line. And you need to adhere to ever-changing industry standards and regulations.

<AmpContent>
<amp-youtube
    data-videoid="8s14Nhvgnb0"
    layout="responsive"
    width="480" height="270">
</amp-youtube>
</AmpContent>
<NonAmpContent>
<div class='embed-container' style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;margin-bottom:40px;"><iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src='https://www.youtube.com/embed/8s14Nhvgnb0' frameborder='0' allowfullscreen></iframe></div>
</NonAmpContent>

Building B2B applications comes with many technical challenges, not least of which is how to set up [multi-tenancy](https://auth0.com/docs/get-started/auth0-overview/create-tenants/multi-tenant-apps-best-practices). [Multi-tenancy](https://auth0.com/docs/get-started/auth0-overview/create-tenants/multi-tenant-apps-best-practices) is when a single instance of software runs on a server that is accessible to multiple groups of users – managing this across various business communities can be broken down into three different considerations:

* Customizing the login experience for each business, from branding to SSO options,
* Managing users for each business with restricted access based on specific permissions,
* And giving businesses the ability to manage their own members.

## The Solution

Auth0 Organizations is our solution to multi-tenancy from an auth perspective – it’s a feature for developers to manage business users. **Simply put, each business is an Organization. Each Organization has members. Each member can have roles that define their permissions.**

When users log into your application, how they log in depends on the requirements defined by each business. For example, let’s say you have three customers with varying needs:

* Organization A is a small business, so they’re comfortable with letting their members log in with Google or another preferred[ Social identity provider (IdP)](https://marketplace.auth0.com/features/social-connections);
* Organization B is a larger corporation, so they’re expecting to leverage not only[ Enterprise IdPs](https://marketplace.auth0.com/features/enterprise-connections) but also multi-factor authentication (MFA) as an additional layer of security;
* Organization C is a brand new startup with only one employee – the founder – and all they want is a seamless experience.

The typical app user needs to be able to log in to the app and do some basic tasks. All of your business customers also want to distinguish a role for Admins who have additional permissions, like sending invites to cool new members or kicking problematic members out.

![Your App](https://images.ctfassets.net/23aumh6u8s0i/4y486Q5HiJbXmlVq5k71pc/57ab4fbab5c49c769a442b8e781d624e/shreyapost.jpg)

## The Process

Let’s explore what a potential solution with Organizations would look like. (Check out the video for a visual walkthrough.)

### Get Started

1. Open your [Auth0 Dashboard](https://manage.auth0.com/dashboard)
2. Select your Application (left menu) and [configure it for business users](https://auth0.com/docs/manage-users/organizations/configure-organizations/define-organization-behavior)
3. [Create Organizations](https://auth0.com/docs/manage-users/organizations/configure-organizations/create-organizations) for each business customer
4. Enable Social and Enterprise [Connections](https://auth0.com/docs/manage-users/organizations/configure-organizations/enable-connections) and [MFA](https://auth0.com/docs/secure/multi-factor-authentication/enable-mfa)
5. [Create roles](https://auth0.com/docs/manage-users/access-control/rbac), [invite members](https://auth0.com/docs/manage-users/organizations/configure-organizations/invite-members) and [assign roles](https://auth0.com/docs/manage-users/organizations/configure-organizations/add-member-roles)

### Get Technical

Integrate this login experience into your React app (or [explore other SDKs](https://auth0.com/docs/libraries)). Follow the[ React SDK quickstart](https://auth0.com/docs/quickstart/spa/react/interactive) for detailed instructions.


1. Install the Auth0 React SDK

```
cd <your-project-directory>
npm install @auth0/auth0-react
```

2. Configure the Auth0 provider component

```js
import React from 'react';
import { createRoot } from 'react-dom/client';
import { Auth0Provider } from '@auth0/auth0-react';
import App from './App';

const root = createRoot(document.getElementById('root'));

root.render(
<Auth0Provider
    domain="{yourDomain}"
    clientId="{yourClientId}"
    authorizationParams={{
      redirect_uri: window.location.origin
    }}
  >
    <App />
  </Auth0Provider>,
);

```

3. Add login to your Application

```js
import { useAuth0 } from "@auth0/auth0-react";
import React from "react";

const LoginButton = () => {
  const { loginWithRedirect } = useAuth0();

  return <button onClick={() => loginWithRedirect()}>Log In</button>;
};

export default LoginButton;
```

4. Add logout to your Application

```js
import { useAuth0 } from "@auth0/auth0-react";
import React from "react";

const LogoutButton = () => {
  const { logout } = useAuth0();

  return (
    <button onClick={() => logout({ logoutParams: { returnTo: window.location.origin } })}>
      Log Out
    </button>
  );
};

export default LogoutButton;
```

5. Show user profile information

```js
import { useAuth0 } from "@auth0/auth0-react";
import React from "react";

const Profile = () => {
  const { user, isAuthenticated, isLoading } = useAuth0();

  if (isLoading) {
    return <div>Loading ...</div>;
  }

  return (
    isAuthenticated && (
      <div>
        <img src={user.picture} alt={user.name} />
        <h2>{user.name}</h2>
        <p>{user.email}</p>
      </div>
    )
  );
};

export default Profile;
```

6. If you need to retrieve the organization the user belongs to, you can use the property [`org_id` in the user object](https://auth0.com/docs/manage-users/organizations/using-tokens), for example you can add the following line of code:

```
<p>{user.org_id}</p>
```

### Go Beyond

Eventually, you may want to do more. You could:

1. [Require multi-factor authentication for users outside their corporate network](https://auth0.com/docs/customize/actions/flows-and-triggers/login-flow#enforce-custom-mfa-policy) to increase security,
2. [Assign default roles to users on sign-up](https://auth0.com/blog/assign-default-role-on-sign-up-with-actions/) or at another point in the identity flow,
3. And allow customers to self-manage their Organizations using an [admin portal](https://auth0.com/docs/get-started/architecture-scenarios/business-to-business/profile-management#admin-portal).

## The Next Step

Multi-tenancy is a common feature requirement for most B2B apps, but you shouldn’t have to spend all your time on building it. This is just the tip of the iceberg for what you can accomplish using Organizations. [Try it yourself for free](https://auth0.com/signup?utm_source=blog&utm_medium=auth0&utm_campaign=b2bsaas), and [let us know if you have any questions](https://community.auth0.com/)!

Are you an early-stage startup? [Apply now](https://auth0.com/startups/vip) to the Auth0 for Startups program, which is **free for one year** and supports 100 Organizations in prod (and much more).

## More Resources

* Get started with our [React quickstart](https://auth0.com/docs/quickstart/spa/react/interactive)
* Dive deep into the [Organizations docs](https://auth0.com/docs/manage-users/organizations)
* Read about [Solving Digital Identity Management for Your SaaS Application](https://auth0.com/blog/digital-identity-management/)
* Learn more about [Auth0 for Startups](https://auth0.com/startups)
* Ask questions in our [Community forum](https://community.auth0.com/)
* Don't have an app? Check out our [sample B2B app](https://github.com/auth0-developer-hub/auth0-b2b-saas-starter/)

[Open a ticket](https://support.auth0.com/tickets/new) for technical support (available for customers in the Startup plan or other paid plans)


Build a Secure and Scalable B2B SaaS App in React

jimena-garbarino

Jimena is an experienced result and value-oriented programmer with a strong engineering background. She excels with Ruby on Rails, Java, and Scrum development. She has worked in web development for 10+ years in many industries and has a master's degree in software engineering from Universidad de Buenos Aires.

Spring Cloud Developer

Jimena Garbarino

A step-by-step guide for building a secured GraphQL API with Spring Boot and Auth0 authentication in React

How to Build a GraphQL API with Spring Boot

poovamraj

I'm a senior software engineer at Auth0. From Rust to Kotlin, Java to JavaScript, I love exploring new languages, technologies, and frameworks. Away from the screen, you can find me in the Alps hiking.

Senior Software Engineer

Poovamraj Thanganadar Thiagarajan

joey devilla headshot 900px

I’m a Senior Developer Advocate at Auth0, and I like to work on various technologies. I’ve developed software for all sorts of platforms, from CD-ROM and the PalmPilot to my current area of focus, mobile phones, IoT devices, and AI. When I’m not looking for strange new platforms to write software for, I’m playing a strange old instrument — the accordion!

Senior Developer Advocate

Joey deVilla

We added support for hooks and rewrote it in TypeScript, made API improvements, improved Expo, Android, and iOS integration, and we think you’ll like it.

**We’re excited to announce the general availability of version 3.0 of our React Native SDK!** In this latest version, we’ve transformed our [`react-native-auth0` SDK](https://github.com/auth0/react-native-auth0) to work with two goals in mind:

* To work with the latest and greatest version of React Native, and 
* To create improvements to make your life as a developer easier. 

Read on to find out more about the new version of the SDK!


## What Changed?

We wanted to improve your developer experience and let you focus on what your applications do. We listened to your feedback, made changes to remove the obstacles that were getting in your way, and cut out the confusing parts that were slowing you down.

In this new version of the SDK, we made the following changes:

**100% support for hooks.** You’ve been asking for access to our authentication APIs (such as login via SMS, email, and so on) through hooks. That makes sense — after all, the general consensus is that React hooks generally make for more concise code that’s easier to read and maintain. So we went “all in”: our SDK now has 100% support through hooks! (And yes, you can still use it “the old way” too!)

**Improved `user` object and credentials.** The `User` object (available through our hooks API) isn’t static anymore and doesn’t just capture a snapshot of the user’s information at the moment of login. Instead, it dynamically updates to reflect changes to the user in real time. You can now force-refresh the user credentials, check their validity, and you can do so using either hooks or classes.

**Expo improvements.** The SDK now seamlessly integrates into any Expo project with a single line of configuration. You just specify the domain, and the SDK automatically generates the other configuration lines. We’ve also raised the minimum supported version of Expo to a more stable version (currently v48).

**Completely rewritten in TypeScript.** This allows us to take advantage of TypeScript’s type safety and removes any confusion about what data you provide to and receive from the SDK’s methods. (It also has the side benefit of making the SDK easier to maintain and update, which we believe will provide future benefits for you.)

**Improved Android/iOS interoperability.** We switched from React Native’s Android and iOS SDKs for web authentication to our own SDKs, which we use in the `Auth0.Android` and `Auth0.Swift` packages. Ours are battle-tested, more reliable, and less buggy, which provides your users with a better login/logout experience.


## Requirements

Naturally, you’ll need an Auth0 account to use the SDK. <a href="https://a0.to/blog_signup" data-amp-replace="CLIENT_ID" data-amp-addparams="anonId=CLIENT_ID(cid-scope-cookie-fallback-name)">You can sign up for a free account here;</a> the free version supports unlimited login/logout for up to 7,000 users and ten applications.

### Which versions of React Native are supported?

Version 3 of our React Native SDK targets apps using React Native version `0.60.5` and up.

### Is Expo supported?

This SDK _is_ compatible with Expo [custom development client](https://blog.expo.dev/introducing-custom-development-clients-5a2c79a9ddf8) and [EAS (Expo Application Services)](https://expo.dev/eas) builds. 

⚠️ Please note that the SDK is _not_ compatible with the [Expo Go](https://expo.dev/client) app because of the SDK’s use of custom native code.

### Which versions of Android and iOS are supported?

Version 3 of our React Native SDK supports the following mobile platform versions:

* **Android SDK 28, also known as “Android 9” or “Pie” (or later).** Android 9 was released in August 2018. 84% of devices active in the Play Store at the time of writing (August 2023) will run applications targeting this Android version. The oldest phones that support this version of Android date back to late 2017.
* **iOS 13 (or later).** iOS 13 was released in September 2020. As of the end of February 2023, almost 88% of iOS users were running iOS 16, with nearly 12% running iOS 15. iOS 14 users accounted for about 0.2% of users, while users of iOS 13 and earlier comprised the remaining 0.3%. The oldest iPhones that will run iOS 13 are the 6S and 6s Plus, which date back to 2015. Simply put, you’re not really leaving anyone behind by setting iOS 13 as the oldest supported version.


## How to Find Out More

* [**The `react-native-auth0` GitHub repository.**](https://github.com/auth0/react-native-auth0/) You can find the code here, as well as more than enough documentation to get started using the SDK — it’s all in the README file.
* [**The migration guide.**](https://github.com/auth0/react-native-auth0/blob/master/MIGRATION_GUIDE.md) This document covers the improvements that we made going from version 2 to version 3, changes that might break your current implementations, and changes to the format for callback URLs. If you’re working with projects based on the v2 SDK, make sure you read this.
* **Quickstarts.** The fastest way to create a new project that uses the Auth0 React Native SDK is to use a quickstart. We have a [**React Native quickstart**](https://auth0.com/docs/quickstart/native/react-native/interactive) and an [**Expo quickstart**](https://auth0.com/docs/quickstart/native/react-native-expo/interactive).
* **Sample projects.** These sample projects will help you get acquainted with the Auth0 React Native SDK in general and version 3 in particular:
	* [Login/logout app using React components](https://github.com/auth0-samples/auth0-react-native-sample/tree/master/00-Login)
	* [Login/logout app using React hooks](https://github.com/auth0-samples/auth0-react-native-sample/tree/master/00-Login-Hooks)
	* [Login/logout app using Expo](https://github.com/auth0-samples/auth0-react-native-sample/tree/master/00-Login-Expo)
* [**Code examples.**](https://github.com/auth0/react-native-auth0/blob/master/EXAMPLES.md) This is a collection of code snippets that shows you how to perform specific tasks using the SDK.


## Summary

We made version 3 of the React Native for Auth0 SDK based on your feedback to improve the developer and user experiences. With support for hooks, better integration with both Android and iOS, strong typing support, and fewer bugs, we’re sure you’ll enjoy working with this version!

Introducing Auth0 React Native SDK 3.0!

matt-raible

Matt Raible is a well-known figure in the Java community and has been building web applications for most of his adult life. For over 20 years, he has helped developers learn and adopt open source frameworks and use them effectively. He's a web developer, Java Champion, and Developer Advocate at Okta. Matt is a frequent contributor to open source and a big fan of Java, IntelliJ, TypeScript, Angular, and Spring Boot. 

Developer Advocate

Matt Raible

React is one of the most popular JavaScript frameworks, and Spring Boot is wildly popular in the Java ecosystem. This article shows you how to use them in the same app and secure it all with Okta.

Use React and Spring Boot to Build a Simple CRUD App

I stream, blog, and make youtube videos about tech stuff. I love coding, I love AI, and I love building stuff!

Staff Developer Advocate

Juan Cruz Martinez

This tutorial will guide you in building a React application protected by Auth0 following a tests-first approach.

Testing your React application is important to ensure your code works as intended. But what if you're using Auth0 to protect your application?

In this blog post, you'll learn to follow TDD (Test-Driven Development) to protect a React application with Auth0. We'll go over what you need to do to set up your tests and provide some tips on how to get the most out of them.

So if you're ready to learn how to unit test your Auth0-protected React app, read on!

## Why Should You Use Auth0 to Protect Your React Application?

Auth0 is an identity and access management service that helps you protect your application by providing user authentication, authorization, and security.

Auth0 eliminates needing to be an expert on identity protocols such as [OAuth 2.0](https://auth0.com/docs/protocols/protocol-oauth2) or [OpenID Connect](https://auth0.com/docs/protocols/openid-connect-protocol) and helps you secure your web application stack. With Auth0, integrating authentication and authorization with your app is a breeze - users are redirected to a [customizable login page](https://auth0.com/docs/authenticate/login/auth0-universal-login) when they want to log in. Once successful authentication occurs, [JWTs](https://auth0.com/docs/tokens/concepts/jwts) containing user information is sent back for verification.

Since Auth0 handles all of the authentication and authorization processes on the back end, you don't have to worry about coding your own login system. This makes it much easier to unit test your protected application as well.

## Bootstrap a React Application

Before the actual testing, you'll need to bootstrap a React application. To do this, you'll use Create React App. This tool is great for quickly getting a React development environment up and running.

To get started, open a terminal window and run:

```bash
npx create-react-app react-auth0-tdd
```

While NPM does its thing, you can start with the next step.

## Connect React with Auth0

The best part of using Auth0  is the ease of use. All you have to do to secure your application is follow these steps:

### Sign up and create an Auth0 application

If you haven't already, <a href="https://a0.to/blog_signup" data-amp-replace="CLIENT_ID" data-amp-addparams="anonId=CLIENT_ID(cid-scope-cookie-fallback-name)">sign up for a free Auth0 account</a>.

A free account offers you the following:

- 7,000 free active users and unlimited logins.
- [Auth0 Universal Login](https://auth0.com/universal-login) for Web, iOS & Android.
- Up to 2 [social identity providers](https://auth0.com/docs/identityproviders) like Google, GitHub, and Twitter.
- Unlimited [Serverless Rules](https://auth0.com/docs/rules/current) to customize and extend Auth0's capabilities.

During the sign-up process, you create something called an [Auth0 Tenant](https://auth0.com/docs/getting-started/the-basics#account-and-tenants), an isolated environment representing the product or service to which you are adding authentication.

After that, you need to create an Auth0 application.

Go to the Applications tab in your [Auth0 Management Dashboard](https://manage.auth0.com/) and click the "Create Application" button. Select "Single Page Web Applications" as the type of application you want to create.

### Configure your application

Once you create the application, go to its Settings tab. You'll need to configure three URLs in there:

- **Allowed Callback URLs**: The URL of your React app that users will be sent after they authenticate. This is typically `http://localhost:3000/` for local development. 
- **Allowed Logout URLs**: The URL where users will be redirected after they log out. This is usually `http://localhost:3000` for local development.
- **Allowed Web Origins**:  If you don't register your application URL in this field, your application will be unable to silently refresh the authentication tokens, and your users will be logged out the next time they visit the application or refresh the page. For development, you'd typically add `http://localhost:3000`

Once you save these settings, you can move on to the next step.

### Install the Auth0 React SDK

Now, we're ready to install the Auth0 React SDK. To do this, open a terminal window, navigate to your project directory, and run:

```bash
npm install @auth0/auth0-react
``` 

Now you're all set to start writing your application's code and tests.

## Using TDD to Build Your Application

Test-driven development (TDD) is a powerful and popular methodology for building software. It's based on the idea that you should write tests first, then write code to ensure those tests pass. This process helps developers create better code by designing test cases up front and streamlining the coding process.

In this section, you'll use TDD to build a simple application that uses Auth0 to authenticate and display information about a user.

You'll start by checking the UI renders a "Log In" button, so head to your `App.test.js` file and replace it with the following code:

```javascript
// src/App.test.js

import { render, screen } from '@testing-library/react';
import App from './App';

test('When the app starts it renders a log in button', () => {
  render(<App />);
  const loginElement = screen.getByText("Log In");
  expect(loginElement).toBeInTheDocument();
});
```

Next, you'll run the tests using the following command:

```bash
npm run test
```

And it should be no surprise if the test fails; after all, you haven't implemented the "Log In" button yet. But no worries, you'll do that next.

Replace the file `App.js` with the following content:

```javascript
// src/App.js

import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <button>
          Log In
        </button>
      </header>
    </div>
  );
}

export default App;
```

With the button implemented, you can re-run the tests. This time the result should be `1 passed, 1 total`.

But the "Log In" button isn't doing anything yet. Let's make sure it works by using Auth0.

Head back to your `App.test.js` and replace the file with the new contents:

```javascript
// src/App.test.js

import { render, screen, waitFor } from "@testing-library/react";
import App from './App';

import { useAuth0 } from "@auth0/auth0-react";

jest.mock("@auth0/auth0-react");

describe("The Application Component in logged out state", () => {

  beforeEach(() => {
    useAuth0.mockReturnValue({
      loginWithRedirect: jest.fn(),
    });
  });

  afterEach(() => {
    jest.clearAllMocks();
  });

  test('When the app starts it renders a log in button', () => {
    render(<App />);
    const loginElement = screen.getByText("Log In");
    expect(loginElement).toBeInTheDocument();
  });

  test('It redirects the user to the Auth0 Universal Login page when the Log In button is pressed', async () => {
    const { loginWithRedirect } = useAuth0();

    render(<App />);
    const loginElement = screen.getByText("Log In");
    loginElement.click();

    // Expect that if we click the "Log In" button, the loginWithRedirect function gets called
    await waitFor(() => expect(loginWithRedirect).toHaveBeenCalledTimes(1));
  });
});
```

This time we added a new test "It redirects the user to the Auth0 Universal Login page when the Log In button is pressed", which validates that the function `loginWithRedirect` from the Auth0 React SDK is called at least one time after pressing the "Log In" button.

In this code snippet, we introduced a few new concepts; I recommend the following read if you want to familiarize yourself with [jest and mocking functions](https://jestjs.io/docs/mock-functions).

As it is required by `jest`, we had to first mock the Auth0 API using `mockReturnValue` at the beginning of each test suite.

Now if you run the test, you'll receive:

```text
The Application Component in logged out state
    ✓ When the app starts, it renders a log-in button (15 ms)
    ✕ It redirects the user to the Auth0 Universal Login page when the Log In button is pressed (1015 ms)

  ● The Application Component in logged out state › It redirects the user to the Auth0 Universal Login page when the Log In button is pressed

    expect(jest.fn()).toHaveBeenCalledTimes(expected)

    Expected number of calls: 1
    Received number of calls: 0
```

Which is exactly what we expected. Next, you'll make that "Log In" button work.

## Implementing Login with Auth0

Under the hood, the Auth0 React SDK uses [React Context](https://reactjs.org/docs/context.html) to manage the authentication state of your users. One way to integrate Auth0 with your React app is to wrap your root component with an Auth0Provider that you can import from the SDK.

Head to your `index.js` file and update its content as the following:

```javascript
// src/index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { Auth0Provider } from "@auth0/auth0-react"; // 👈 New code

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    {/* 👇 New code */}
    <Auth0Provider
      domain="{auth0-domain}"
      clientId="{auth0-clientid}"
      authorizationParams={{
        redirect_uri: window.location.origin
      }}
    >
    {/* 👆 New code */}
      <App />
    {/* 👇 New code */}
    </Auth0Provider>
    {/* 👆 New code */}
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
```

The `Auth0Provider` requires you to provide the domain for your Auth0 tenant and the clientId for your Auth0 application. Both values are present in your [Auth0 Application's Dashboard](https://manage.auth0.com/#/applications), as shown below:

![You can retrieve the Auth0 domain and client id from the application's settings](https://images.ctfassets.net/23aumh6u8s0i/3y36XLQcKi70jWZBbROCBj/a4d6e4584cc7d29159893f9a7c56e51b/react-tdd-config.png)

After setting those two values in the code, all we have to do is to change the "Log In" button to enable the `onClick` event.

```javascript
// src/App.js

// 👇 New code
import { useAuth0 } from "@auth0/auth0-react";
// 👆 New code
import './App.css';

function App() {
  // 👇 New code
  const { loginWithRedirect } = useAuth0();
  // 👆 New code

  return (
    <div className="App">
      <header className="App-header">
        {/* 👇 Updated code */}
        <button onClick={() => loginWithRedirect()}>
        {/* 👆 Updated code */}
          Log In
        </button>
      </header>
    </div>
  );
}

export default App;
```

Now if you run your tests once more, you'll see both of them passing.

```text
 PASS  src/App.test.js
  The Application Component in logged out state
    ✓ When the app starts, it renders a log in button (11 ms)
    ✓ It redirects the user to the Auth0 Universal Login page when the Log In button is pressed (4 ms)

Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
```

## Displaying the User’s Profile

So far, we have been able to test the application while in a logged-out state, but how would we go about testing the application after the user signs in, for example, to test if the user name is displayed correctly on the screen?

The simple answer is to continue mocking the `useAuth0` hook, altering the different properties we need for our test.

Let's start by writing a new test to validate if the "Log Out" button is present after the user signs in. Change the content of your `App.test.js` file by adding the following code:

```javascript
// src/App.test.js

...
// 👇 New code
describe("The Application Component in logged in state", () => {
  beforeEach(() => {
    useAuth0.mockReturnValue({
      isAuthenticated: true,
    });
  });

  afterEach(() => {
    jest.clearAllMocks();
  });

  test('When the app starts it renders a log out button', () => {
    render(<App />);
    const logoutElement = screen.getByText("Log Out");
    expect(logoutElement).toBeInTheDocument();
  });
});
// 👆 New code
```

Running the tests will now fail until we add the new "Log Out" button to the screen.

```javascript
// src/App.js

import { useAuth0 } from "@auth0/auth0-react";
import './App.css';

function App() {
  const { loginWithRedirect, logout, isAuthenticated } = useAuth0(); // 👈 Updated code

  return (
    <div className="App">
      <header className="App-header">
        {/* 👇 Updated code */}
        {isAuthenticated ? (
          <button onClick={() => logout()}>
            Log Out
          </button>
        ) : (
          <button onClick={() => loginWithRedirect()}>
            Log In
          </button>
        )}
        {/* 👆 Updated code */}
      </header>
    </div>
  );
}

export default App;
```

And when you check the tests again, all of them are passing.

```text
 PASS  src/App.test.js
  The Application Component in logged out state
    ✓ When the app starts, it renders a log in button (11 ms)
    ✓ It redirects the user to the Auth0 Universal Login page when the Log In button is pressed (4 ms)
  The Application Component is logged in the state
    ✓ When the app starts, it renders a log-out button (1 ms)

Test Suites: 1 passed, 1 total
Tests:       3 passed, 3 total
```

Finally, we'll validate that the user's name and email address are shown on the screen.

```javascript
// src/App.test.js

...
  beforeEach(() => {
    useAuth0.mockReturnValue({
      isAuthenticated: true,
      // 👇 New code
      user: {
        name: "Juan",
        email: "jc@example.com",
        picture: "https://avatar.com",
      },
      // 👆 New code
    });
  });
  
  ...

  test('When the app starts it renders a log out button', () => {
    render(<App />);
    const logoutElement = screen.getByText("Log Out");
    expect(logoutElement).toBeInTheDocument();
  });

  // 👇 New code
  test('It renders the user name and email address', () => {
    render(<App />);
    const userNameElement = screen.getByTestId("user-name");
    expect(userNameElement).toHaveTextContent('Juan');

    const userEmailElement = screen.getByTestId("user-email");
    expect(userEmailElement).toHaveTextContent('jc@example.com');
  });
  // 👆 New code
});
```

For the logged-in state, not only do we need to mock the authentication status with the `isAuthenticated` flag, but we also need to set the user information.

Once that's done, we can fix the UI to display such values and get the test passing.

```javascript
// src/App.js

import { useAuth0 } from "@auth0/auth0-react";
import './App.css';

function App() {
  const { loginWithRedirect, logout, isAuthenticated, user } = useAuth0(); // 👈 Updated Code

  return (
    <div className="App">
      <header className="App-header">
        {isAuthenticated ? (
          // 👇 Updated code
          <div>
            <h2>User:</h2>
            <p data-testid="user-name">{user.name}</p>
            <h2>Email:</h2>
            <p data-testid="user-email">{user.email}</p>
            <button onClick={() => logout()}>
              Log Out
            </button>
          </div>
          // 👆 Updated code
        ) : (
          <button onClick={() => loginWithRedirect()}>
            Log In
          </button>
        )}
      </header>
    </div>
  );
}

export default App;
```

Now the application displays the user name and email as well as the logged-out button.

Let's run the tests and see the final results.

```text
 PASS  src/App.test.js
  The Application Component in logged out state
    ✓ When the app starts, it renders a log in button (12 ms)
    ✓ It redirects the user to the Auth0 Universal Login page when the Log In button is pressed (4 ms)
  The Application Component is logged in the state
    ✓ It renders a log-out button (2 ms)
    ✓ It renders the user name and email address (3 ms)

Test Suites: 1 passed, 1 total
Tests:       4 passed, 4 total
```

Congrats! But before you leave this tutorial, there's another more thing you'll have to do, and that is user testing.

So far, all tests you run on the application are unit tests. Even though they are great for validating functionality, they don't verify that the integrations are working or set up correctly. For example, we mocked the Auth0 API to return the data we would expect if everything was fine. Still, we don't validate if the given Auth0 Domain or Client ID is correct or if the configuration on the Auth0 dashboard is appropriately set.

For that, you can write integration tests or perform manual tests by running the application on the browser.

To test your application manually, go to your terminal and start the app by running the following:

```bash
npm run start
```

Visit `http://localhost:3000`, click the login button, and sign up for a new test user if you don't have one. After you're done, you'll be redirected back to the application where your name is displayed.

| ![Application's start page](https://images.ctfassets.net/23aumh6u8s0i/1ueiE6uYH8ig9Vs6EJ0HVd/5a5f5598a90b091c68ced31c0c163cfe/react-tdd-1.png)|![Auth0 Universal Login Screen](https://images.ctfassets.net/23aumh6u8s0i/7h6l4mzkJvj4SMgIPxqq8J/12ee1f571be10baf746ba5404e0232d2/react-tdd-2.png) | ![Application's user information screen](https://images.ctfassets.net/23aumh6u8s0i/1ZUiCCpbIYKAtsKapLnSB5/9a623efc3daa63d0018be195808a5b7e/react-tdd-3.png) |
| --- | --- | --- | 

## Conclusion

In this tutorial, you have implemented user authentication to identify your users and get user profile information in React following the TDD process to ensure that our code is well-tested.

This tutorial covered the most common authentication use case for a React application, and to keep it simple, we took some shortcuts, like working off a single component.

If you want to learn more about the possibilities of Auth0 with React, please check the [React Authentication by Example Guide](https://developer.auth0.com/resources/guides/spa/react/basic-authentication).

Let me know in the comments below what you think of this tutorial.

Thanks for reading!

Unit Testing Your Auth0 Protected React Application

sandrino-di-mattia

Principal Architect

Sandrino Di Mattia

Learn how (and where) to authenticate your user in the different deployment models that exist for Next.js

The Ultimate Guide to Next.js Authentication with Auth0

Ruchita Shah

Ruchita is a Product Marketer for Okta’s Customer Identity products. With an engineering and product marketing background, she is focused on showcasing how organizations can create secure and seamless digital experiences for their end users using Okta’s identity products. She spends her spare time hiking, reading and watching Formula1

Senior Product Marketing Manager, Customer Identity

The Auth0 React Native SDK v2.16.0 improves both developer and the user experience

We’re excited to announce the released version 2.16.0 to our Auth0 React Native SDK. Major features we delivered in this release include:

* Expo support
* Hooks API
* Secure Credentials Manager

## Support for Expo

Expo is a popular framework that adds a suite of features to React Native apps. We have added support for this tooling to make it much easier to work with our SDK in conjunction with Expo, as it provides a [number of benefits](https://www.mozestudio.com/journal/what-is-expo-and-why-it-matters-for-app-development/) when used to build React Native apps.

We added this support in response to growing customer demand. We received various feedback across our channels that indicated to us that this would be a valuable addition to our SDK. In an excellent demonstration of the power of open-source software, our implementation actually started life as a pull request from the community, which was able to review, tidy up, and merge into our codebase for the benefit of others. 

Given Expo’s growing popularity among the React Native community, it was clear this was an opportunity to provide first-class support in the SDK. To that end, we also now provide an [Expo-specific quickstart](https://auth0.com/docs/quickstart/native/react-native-expo/interactive) in addition to our standard React Native quickstart so that developers can get up and running even quicker.

## New React Hooks API

This release adds support for using the SDK using[ React Hooks](https://reactjs.org/docs/hooks-intro.html). This was primarily driven by our own desire to modernize the SDK and provide an API that felt more natural to modern React developers. React Hooks have been in React Native 0.59 (released around March 2019). Our hooks wrap our pre-existing WebAuth classes, so the developer can choose to use Hooks or to continue using the provided classes should they wish.

In addition, we updated our [React Native quickstart](https://auth0.com/docs/quickstart/native/react-native/interactive) to use the new Hooks API by default.

![New React Hooks API](https://images.ctfassets.net/23aumh6u8s0i/5mdxN3EK60eYe1LS3E9jP5/90150f525eea0d0209ba87c50753d14d/react-sdk.png)

### How to use the new Hooks API

Previously, the developer could instantiate a class and use the properties and methods provided to implement authentication into their apps.

```js
import Auth0 from 'react-native-auth0';
import jwt_decode from 'jwt-decode';
 
const auth0 = new Auth0({
     domain: 'YOUR_AUTH0_DOMAIN',
     clientId: 'YOUR_AUTH0_CLIENT_ID',
});
  
const App = () => {
 
   let [user, setUser] = useState(null);
 
   const onLogin = () => {
       auth0.webAuth
           .authorize({
               scope: 'openid profile email'
           })
           .then(credentials => {
                 const payload = jwt_decode(credentials.idToken);
                 setUser(payload)
           })
           .catch(error => console.log(error));
   };
 
   return (
       <View>
         {!user && <Button onPress={onLogin} title="Log in" />}
         {user && <Text>Logged in as {user.name}</Text>}
       </View >
   );
}
 
export default App;
```

Now, the developer can use Hooks to implement login, providing an idiomatic way to implement reactive code in a React Native app using function components:

```js
// App.js
import {Auth0Provider} from 'react-native-auth0';

const App = () => {
  return (
    <Auth0Provider domain="YOUR_AUTH0_DOMAIN" clientId="YOUR_AUTH0_CLIENT_ID">
      {/* YOUR APP */}
   </Auth0Provider>
 );
};
```
```js
// Component.js
const Component = () => {
    const {authorize, user} = useAuth0();
   
    const login = async () => {
      await authorize();
    };
   
    return (
      <View>
        {!user && <Button onPress={login} title="Log in" />}
        {user && <Text>Logged in as {user.name}</Text>}
      </View>
    );
   };   
```

## Secure Credentials Manager

Up until this release, the developer was in charge of storing and managing the tokens that were returned to the app from Auth0 without any assumptions from the SDK as to how and where tokens were stored. Now, we provide a built-in secure credentials manager that automatically stores these tokens.

This was another feature that was driven by community asks but one that makes a lot of sense if we’re interested in making things as frictionless for the developer as possible. We had a number of requests across our channels for this, and we’re pleased to be able to provide it as a first-class addition to the SDK

This mechanism uses the thoroughly tested credentials manager instances provided by [Auth0.Swift](https://github.com/auth0/Auth0.swift/) and [Auth0.Android](https://github.com/auth0/Auth0.Android).

Automatically refreshes the access token when it expires.

Automatically stores and clears tokens when using the Hooks API.

Support for platform-specific Biometric Authentication

## Summary

The Auth0 React Native SDK v2.16.0 improves both developer and the user experience. On the one hand, it provides flexibility for developers to be up and running in less time. On the other hand, it provides a more secure credentials manager that can automatically manage tokens.

For further reading: [Introducing the Auth0 Flutter SDK](https://auth0.com/blog/introducing-the-auth0-flutter-sdk/)

Introducing Auth0 React Native SDK v2.16.0

37590801?s=460&v=4

A software engineer who dreams about non-electric sheep and autonomous vehicles and likes to champion security.

Software Engineer

Dan Arias

Learn how to add user authentication to React using Context and Hooks

The Complete Guide to React User Authentication with Auth0

Use JHipster to build a photo-sharing app for web and mobile that has a React front-end with OIDC authentication and a Spring Boot back-end with OAuth2 authorization.

Integrate React Native and Spring Boot Securely

sambiopic

I'm Director of Developer Relations and a Google Developer Expert for Angular and Web Technologies. I believe anyone who wants to learn to code should be able to learn code and I love teaching. When I'm not coding or writing, you'll find me outside hiking or camping in the beautiful Pacific Northwest.

Director of Developer Relations

Sam Julien

william_johnson

  Will Johnson is a Developer Advocate at Auth0. He loves teaching topics in a digestible way to empower more developers. He writes blog posts, records screencasts, and writes eBooks to help developers. He's also an instructor on <a target='_blank' rel='noopener noreferrer' href='https://egghead.io'><strong><b>egghead.io</b></strong></a>.


Will Johnson

Learn how to set up Auth0 for identity management in a Gatsby static site.

**TL;DR**: In this article, you'll learn how to secure a basic Gatsby static site with Auth0. The finished code for this tutorial is at the [`gatsby-auth0-sample-app` repository](https://github.com/auth0-blog/gatsby-auth0-sample-app).

Gatsby beautifully merges technologies like [GraphQL](https://graphql.org/) and [MDX](https://github.com/mdx-js/mdx) with concepts like [progressive web apps](https://developers.google.com/web/progressive-web-apps/) and [server-side rendering](https://reactjs.org/docs/react-dom-server.html). There's even an easy-to-use command line interface (the Gatsby CLI) to make developing, building, and deploying your static site virtually painless. To me, it is the most intuitive [JAM stack](https://jamstack.org/) (JavaScript + APIs + Markup) solution out there.

<include src= "TweetQuote" quoteText= "@GatsbyJS is a powerful static site generator combining React, GraphQL, and many other modern web technologies."/>

As wonderful as this is, many static sites still need authentication. Stores, member areas, or admin dashboards can all be built as static sites, and all require either a protected route or a persisted user profile. Luckily, Auth0 is here to help.

This article will take a slightly different path than our typical authentication tutorial. Ordinarily, I would have you build a sample application that includes styling and a source of data. Because Gatsby orchestrates things like GraphQL, CSS-in-JS, API data, and much more, it's incredibly easy to get lost in the weeds in a tutorial and lose track of what is specific to Gatsby.

For that reason, I'm going to have you build the absolute simplest (and, well, ugliest) sample application possible so you can focus solely on learning how to set up authentication in that app. I won't be covering any data sources, GraphQL, or styling strategies. Keeping this tutorial super-simple means that this strategy will work for you whether you're building a blog, a store, or anything else your heart desires.

## Prerequisites

To go through this tutorial, you will need Node.js 16 and NPM installed. You should [download and install them](https://nodejs.org/en/download/) before continuing. 

You'll also need some basic knowledge of React. You only need to know the basic scaffolding of components and JSX to follow along, but it will be difficult if you're a total beginner. If that's you, you can read our article on [building and securing your first React app](https://auth0.com/blog/react-tutorial-building-and-securing-your-first-app/) before continuing.

## Gatsby Basics

To get started with Gatsby, you'll first need to install the Gatsby CLI globally on your machine. You can do that by running the command:

```bash
npm install -g gatsby-cli
```

The Gatsby CLI has some built-in commands like `develop` to run a development server, `build` to generate a production build, and `serve` to serve the production build. There are many other options and commands that you can check out in the [Gatsby CLI docs](https://www.gatsbyjs.org/docs/gatsby-cli/).

One cool feature of the CLI is the ability to use a *starter* as the template for a new project. You can use either an official Gatsby starter or any other Gatsby repository. For this tutorial, you'll use `gatsby-starter-hello-world` by running the following command:

```bash
gatsby new gatsby-auth0 gatsbyjs/gatsby-starter-hello-world
```

Note that the first argument (`gatsby-auth0`) is just the name of the new project. You can call it whatever you'd like.

Gatsby will automatically run `npm install` for you, so once that's done, open the project in your preferred editor. You'll see the simplest possible Gatsby project, which includes one file inside of the `src/pages/` folder called `index.js`. Open that file and replace it with the following:

```jsx
// ./src/pages/index.js
import React from "react";
import { Link } from "gatsby";

export default () => (
  <div>
   <p>Hello Gatsby!</p>
   <Link to="/account">Go to your account</Link>
 </div>
);
```

You can see that this is a super simple React component written in JSX. It imports Gatsby's `Link` function to navigate to an `account` route. You'll create that route in the next section. For now, run the command `gatsby develop` in your terminal and navigate to [`localhost:8000`](http://localhost:8000). You should see "Hello Gatsby!" with a link to go to the account page.

## Create an Account Route

You've now created your first static site with Gatsby &mdash; congratulations! You're ready to create an `account` route that you'll protect with Auth0 in just a bit. 

To start, create a new file called `account.js` in the `src/pages/` folder and paste in the following code:

```javascript
// src/pages/account.js
import React from "react";

const Account = () => (
 <div>
  <p>This is going to be a protected route.</p>
 </div>
);

export default Account;
```

The above code is another super simple React component. Gatsby will automatically turn this file (and any file in this folder that exports a React component) into a route. Start the development server again with `gatsby develop` if it's not already running. You should see the following if you navigate to [`localhost:8000/account`](http://localhost:8000/account):

![Gatsby basic account route.](https://images.ctfassets.net/23aumh6u8s0i/2PNsLedqq159RzdEbyT5If/58d4e9731fbfd16f6045b9967fbc7399/gatsby-account-route)


## Add Auth0 to Your Gatsby Site

You're now ready to protect the entire `account` route with Auth0. Auth0 handles identity features like user registration, email confirmation, and password reset, so you don't have to build them yourself.

### Sign up for Auth0

If you don't have one yet, you will have to <a href="https://a0.to/blog_signup" data-amp-replace="CLIENT_ID" data-amp-addparams="anonId=CLIENT_ID(cid-scope-cookie-fallback-name)">create a free Auth0 account</a> now. After creating your account, go to [the _Applications_ section of your Auth0 dashboard](https://manage.auth0.com/#/applications) and click on the _Create Application_ button. Then, fill the form as follows:

- Application Name: "Gatsby App"
- Application Type: "Single Page Web Applications"

<include src="SignupCTA" text="Try out the most powerful authentication platform for free." linkText="Get started →" />

When you click on the _Create_ button, Auth0 will redirect you to your new application's _Quick Start_ tab. From there, head to the _Settings_ tab and make two changes:

1. Add `http://localhost:8000` to the _Allowed Callback URLs_ field.
2. Add `http://localhost:8000` to _Allowed Logout URLs_ and _Allowed Web Origins_.

> For security reasons, after the login and logout processes, Auth0 will only redirect users to the URLs you register in these fields.

After updating the configuration, scroll to the bottom of the page, and click _Save Changes_. For now, leave this page open.

### Set up Gatsby with Auth0

To get started with adding Auth0 to your Gatsby app, you'll need to install [Auth0's SDK for React Single Page Applications](https://github.com/auth0/auth0-react) in your app. Back in the terminal, stop the development server (`Ctrl` + `C`), and issue the following command:

```bash
npm install @auth0/auth0-react
```

> **Note:** This tutorial follows the [Authorization Code Flow with Proof Key for Code Exchange](https://auth0.com/docs/get-started/authentication-and-authorization-flow/authorization-code-flow-with-proof-key-for-code-exchange-pkce). The Auth0 React SDK uses this under the hood. You can read more about these changes in [this article](https://auth0.com/blog/oauth2-implicit-grant-and-spa/) by Auth0 Principal Architect [Vittorio Bertocci](https://auth0.com/blog/authors/vittorio-bertocci/).

### Add Gatsby Auth env config

While you could manually update the variables `AUTH0_DOMAIN`, `AUTH0_CLIENTID`, and `AUTH0_CALLBACK`, it's a much better practice to create a separate environment file that's not checked in to source control.

Luckily, Gatsby ships with the library [`dotenv`](https://github.com/motdotla/dotenv), so you can provide the values to the authentication service by creating a file at the root of the project called `.env.development`. Paste in the following:

```env
# ./.env.development
# Get these values at https://manage.auth0.com
AUTH0_DOMAIN=<value>
AUTH0_CLIENTID=<value>
AUTH0_CALLBACK=http://localhost:8000/callback
```

Replace the placeholders with your Auth0 domain (e.g. `yourtenant.auth0.com`) and client ID. You can find both in your application's settings page.

![Auth0 Dashboard Application Settings Page](https://images.ctfassets.net/23aumh6u8s0i/5vasoZZii3Pxzo5UnC2Q3b/3a6ee748f58141de78edb2bd2dd1c3ba/auth0-dashboard-application-settings-screen.png)

You can do the same thing with production values by creating `.env.production`. Don't forget to change `AUTH0_CALLBACK` to whatever your production server is and add it to your application settings in Auth0.

## Add Login to a Gatsby App with Auth0

Auth0 is now ready to use. The first step to using Auth0 is to wrap your root element in the `Auth0Provider` component. Create a `gatsby-browser.js` file at the root of your project. This file is the behind-the-scenes root component for Gatsby.


Paste in the following code:

```js
//gatsby-browser.js
import React from 'react';
import { Auth0Provider } from '@auth0/auth0-react';
import { navigate } from 'gatsby';

const onRedirectCallback = (appState) => {
 // Use Gatsby's navigate method to replace the url
 navigate(appState?.returnTo || '/', { replace: true });
};

export const wrapRootElement = ({ element }) => {
 return (
  <Auth0Provider
   domain={process.env.AUTH0_DOMAIN}
   clientId={process.env.AUTH0_CLIENTID}
   redirectUri={window.location.origin}
   onRedirectCallback={onRedirectCallback}
   >
    {element}
 </Auth0Provider>
 );
}; 
```
Here's what's happening in this code:

* The `wrapRootElement` hook from the [Gatsby Browser API](https://www.gatsbyjs.com/docs/reference/config-files/gatsby-browser/#wrapRootElement) sets up the use of Provider components.

* Wrap the root element in the `<Auth0Provider>`

* Pass in the `AUTH0_DOMAIN` and `AUTH0_CLIENTID` into the `domain` and `clientId` props

* Pass in `window.location.origin` to the `redirectUri` prop, which is the URL Auth0 will redirect your browser to with the authentication result. 

* `onRedirectCallback` removes the code and state parameters from the URL when you are redirected from the authorize page.

> In this sample application, you won't be using the access token to access an API. Suppose your Gatsby application gets data using a secure API. In that case, you will use the access token stored here to access those protected resources (for example, by adding it as an `Authorization` header). Check out the Gatsby documentation on [Sourcing from Private APIs](https://www.gatsbyjs.org/docs/sourcing-from-private-apis/) to learn more about how to use private API data in your Gatsby site.


## Protect a Gatsby Route with Auth0

Now that `Auth0Provider` is set up and ready to be used in Gatsby. You're going to protect the `/account` route. When logged-out users try to visit, they're redirected to the Auth0 login.

Add the new code indicated by the 👇 emojis to `account.js`

```jsx
// src/pages/account.js
import React from "react";
/* 👇 New code 👇 */ 
import { Link } from "gatsby";
import { useAuth0 } from "@auth0/auth0-react";
/* 👇 Import the withAuthenticationRequired HOC 👇 */ 
import { withAuthenticationRequired } from '@auth0/auth0-react';


const Account = () => {
/* 👇 Access user from the useAuth0 hook 👇 */
 const { user } = useAuth0();
  return (
  <>
   <nav>
    {/* 👇 Link to homepage */} 👇
    <Link to="/">Home</Link>
    {/* 👇 Display users email */} 👇
    <p>Email: {user.email}</p>
  </nav>
 </>
 );
};

/* 👇 Wrap the component in the withAuthenticationRequired handler 👇 */
export default withAuthenticationRequired(Account);
```
What's happening in this code?

* You accessed the `user` object from the `useAuth0` hook

* Added a link to the home page with the Gatsby `Link` component

* Displayed the users' email address stored in the `user` object

* Wrapped the exported `account` component in `withAuthenticationRequired()`

Wrapping `account` in `withAuthenticationRequired()` makes it so that when anonymous users visit the `/account` route, they will be redirected to the login page. The user will also return to the page they were visiting after successful login.

With the server running, visit [http://localhost:8000/account](http://localhost:8000/account), and you'll be redirected to the Auth0 log in.

Instead of making the user visit the `/account` path to log in, which is inconvenient. In the next section, you'll use Auth0 to allow users to choose when they want to log in with a login button.

### Create a login button component

The next thing to do is to create a login button. When the user clicks this button, they will be redirected to [Auth0's Universal Login](https://auth0.com/docs/authenticate/login/auth0-universal-login) page and authenticated after successful login. Inside the `src` directory, create a `components` directory, and then create a file called `LoginButton.js` in `src/components/` and paste in the code below:

```jsx
// src/components/LoginButton.js
import React from "react";
import { useAuth0 } from "@auth0/auth0-react";

function LoginButton() {
 const {
  isAuthenticated,
  loginWithRedirect,
   } = useAuth0();

   return !isAuthenticated && (
    <button onClick={loginWithRedirect}>Log in</button>
  );
};

export default LoginButton;
```
Here's a breakdown of this code:

* The `useAuth0` hook gives you access auth state and methods. In this example, you get the `isAuthenticated` auth state and the `loginWithRedirect` method from the `useAuth0` hook. 

* The auth state `isAuthenticated` checks if Auth0 has authenticated the user before React renders any component. 

* Pass `loginWithRedirect` to the `onClick` handler to redirect your users to the Auth0 Universal Login Page, where they can get authenticated.

With this component created, the next step is to add it to the index page.

Add the LoginButton component to index.js

So far, there isn't a way for the user to actually log in and get redirected to Auth0 for login and authentication. Let's import and add the `LoginButton` component to `index.js`.

Update `index.js` with the new code shown below:

```jsx
// src/pages/index.js
import React from "react";
import { Link } from "gatsby";
/* 👇 New Code */ 
import LoginButton from "../components/LoginButton";


export default function Home() {
 return (
   <div>
   {/* 👇 New Code */}
    <LoginButton />
    <p><Link to="/account">Visit Your Account</Link></p>
   </div>
  );
};
```

Restart the Gatsby development server and navigate to [`localhost:8000/account`](http://localhost:8000). You should now see a button labeled login, click it, and you're directed to Auth0 to log in to your application (you will need to authorize the application the first time you log in). You'll also see your email address on the account page.

## Add Logout to a Gatsby App with Auth0

Finally, you'll need a way for users to log out of your application. Inside `src/components` create a new file called `LogoutButton.js`.

Then add the following code:

```javascript
// src/components/LogoutButton.js
import React from "react";
import { useAuth0 } from "@auth0/auth0-react";

function LogoutButton() {
 const {
   isAuthenticated,
   logout,
   } = useAuth0();

   return isAuthenticated && (
     <button onClick={() => {
     logout({ returnTo: window.location.origin });
    }}>Log out</button>
 );
};

export default LogoutButton;
```

Here is a quick recap of this code:

* Access the `isAuthticated` auth state and the `logout` method from the `useAuth0` hook. 
* The `logout()` method redirects your users to your Auth0 logout endpoint (https://YOUR_DOMAIN/v2/logout) and then immediately redirects them to your application.

### Update the account component

Now you can add a `LogoutButton` to the navigation section of the `Account` component. The finished `Account` component code will look like this:

```javascript
// src/pages/account.js
import React from "react";
import { Link } from "gatsby";
import { useAuth0 } from "@auth0/auth0-react";
import { withAuthenticationRequired } from "@auth0/auth0-react";
/* 👇 New Code */ 
import LogoutButton from "../components/LogoutButton";

const Account = () => {
 const { user } = useAuth0();
 return (
  <>
   <nav>
    <Link to="/">Home</Link>
    <p>Email: {user.email}</p>
    {/* 👇 New Code */}
    <LogoutButton />
  </nav>
 </>
 );
};

export default withAuthenticationRequired(Account);
```

Running `gatsby develop` again, you should now be able to log in, refresh your application, and log out successfully. Congratulations!

Remember, the finished code for this tutorial is at the [`gatsby-auth0` repository](https://github.com/auth0-blog/gatsby-auth0-sample-app).

## Conclusion

You now know how to implement authentication using Auth0 in virtually any Gatsby application. Feel free to explore the [excellent Gatsby docs](https://www.gatsbyjs.org/docs/) and learn more about [sourcing and querying data with GraphQL](https://www.gatsbyjs.org/docs/sourcing-from-the-filesystem/), styling your application using [CSS modules](https://www.gatsbyjs.org/docs/css-modules/) or [CSS-in-JS](https://www.gatsbyjs.org/docs/emotion/), and much, much more. Most importantly, I hope you have as much fun as I do developing with Gatsby!

Securing Gatsby with Auth0

wern ancheta

Hi! I’m Wern Ancheta. I’m a Web Developer from San Fernando City, La Union, Philippines. I love building things for the web and sharing the things I’ve learned through writing. When I’m not coding or learning something new, I enjoy watching anime and playing video games.

Guest Author

Wern Ancheta

Learn how to add authentication to React Native Android apps with Auth0.

Get Started with Auth0 Authentication in React Native Android Apps

Learn how to add authentication to React Native iOS apps with Auth0.

Get Started with Auth0 Authentication in React Native iOS Apps

Use the Auth0 CLI to customize the colors of the Universal Login page.

Your login screen is the very first thing people see before they enter their personal information on your website. You want to give the best impression possible. Securing their data with Auth0 is a great first step. It also leads to a login page branded with the colors and the logo of Auth0. Don't get me wrong, the branding looks excellent, but the inconsistent branding can startle some users.

Today you'll learn how to use the [Auth0 CLI](https://github.com/auth0/auth0-cli) to customize your login page without leaving your terminal.

## What You'll Need

You need a couple of things in place to follow along with this tutorial: 

* **Auth0 Account.** If you do not have one, you can sign up for a <a href="https://auth0.com/signup" data-amp-replace="CLIENT_ID" data-amp-addparams="anonId=CLIENT_ID(cid-scope-cookie-fallback-name)">free Auth0 account</a>.

* **Application in your Auth0 tenant.** If you don't have an application in your Auth0 dashboard, don't worry; I will show you how to download one of Auth0's quickstarts.

## What Is the Auth0 CLI

Auth0 wants to create tools that make developers' work more manageable since we are a  developer-first company. With the CLI, we're reducing the number of steps and clicking around you have to do on the Auth0 Dashboard and keeping your workflow in the terminal. 

This allows you to set up your applications faster, test logging in, get error log information, and more within the terminal. I'm blown away by how many features are packed in this tool. Today, I'll show how to update an application's login page in your Auth0 Dashboard.

> Get an introduction to the Auth0 CLI by reading [this blog post](https://auth0.com/blog/introducing-auth0-cli/).


## Install the Auth0 CLI 

You can install the Auth0 CLI on macOS, Windows, and Linux. Here are the commands for each:

### macOS with Homebrew

```bash
brew tap auth0/auth0-cli && brew install auth0
```

### Windows manual installation

* Download the Windows binary from the latest release: [https://github.com/auth0/auth0-cli/releases/latest/](https://github.com/auth0/auth0-cli/releases/latest/)
* Extract
* Run `auth0.exe`

### Linux with Homebrew

```bash
 brew tap auth0/auth0-cli && brew install auth0
```

I always like to double-check after I install new tools. With the newly available `auth0` command, type `auth0 -v` to check the version and confirm the installation. The next thing you need is to sign to your Auth0 account and authenticate the CLI.

### Connect CLI and login to Auth0 account

Sign in to your Auth0 account from the CLI by typing:

```bash
auth0 login
✪ Welcome to the Auth0 CLI 🎊

If you don't have an account, please go to https://auth0.com/signup

Your Device Confirmation code is: JKHH-QKFM

 ▸ Press Enter to open the browser to log in or ^C to quit...
```

You'll get welcomed to the Auth0 CLI, and you'll get a confirmation code. Press **Enter** on your keyboard. This will open a page in your browser asking you to verify the code on this page matches the one on the CLI. Click **Confirm**.

![Auth0 CLI Device Confirmation Page](https://images.ctfassets.net/23aumh6u8s0i/44GTGeMlFm6LTsdejiHGyl/fa7b4b313b99a3af9276a7e8f07a0ab4/device-confifmation.png)

Next, you meet the _Authorize App_ page. You can choose which Auth0 tenant you want to log in to if you have more than one. You'll see a long list of permissions that the Auth0 CLI wants to have on your account. Scroll down and click **Accept**

![Auth0 Authorize App Page](https://images.ctfassets.net/23aumh6u8s0i/2jFFU4iSSeFng3B18oPWH3/d5b71fc09e702d7d59cba32c2848a0c0/auth-cli.png)

Back in your terminal, you'll see a message that you're logged in successfully. 

```bash
Waiting for login to complete in browser... done

 ▸    Successfully logged in.
 ▸    Tenant: YOUR_AUTH0_DOMAIN.us.auth0.com
```

If you already have an application in your Auth0 tenant, you can skip to **[Edit the Universal Login Page](#Edit-the-Universal-Login-Page)**.

### Create a new application with Auth0 quickstart

If you don't have an application registered in the Auth0 Dashboard, you can create one from the CLI. Run the following command:

```bash
auth0 app create
```
The CLI will ask you to name your application and write a description for it. Then, you'll be asked to choose a type in this example, I'll a React application, so select **Single Page Application**. After that, you'll be asked to enter _Allowed Callback URL_ then _Configure Logout URLs_ enter `http://localhost:3000` to follow along with this example. You'll get a message confirming you created your new application successfully.


```bash
 Name: New CLI app
 Description: testing this out
 Type: Regular Web Application
 Allowed Logout URLs: http://localhost:3000
```


Now that you're logged and have an application created, you can edit the login page.

## Edit the Universal Login Page

There are two ways to edit the login page. One way requires a custom domain on your Auth0 account because it sets up a custom page template with custom HTML and JavaScript. 

The second option lets you only update the colors and logos. This post will show you the latter.

> Custom domains is an Auth0 paid feature that lets you use your own domain name on the login page. Learn more about them by [checking out the Custom Domain docs](https://auth0.com/docs/customize/custom-domains)

Run the `branding update` command to customize the colors and logo.

```bash
auth0 branding update
```

The first prompt that you'll get will ask for the accent color. It will take hex color code. I'm going to use this lovely shade of purple `#664EAE`

The following prompt is for the background color. This changes the color of the _Login_ button. The default is black; I will use `#FFF` for white.

```bash
Accent Color: [? for help] #664EAE
Background Color: [? for help] #FFF
```

After that, you'll get a message in the terminal saying your tenants' branding is updated.

Below that, you'll see some other options you can update as well. Like the favicon and the logo:

```bash
 ACCENT COLOR #664EAE 
 BACKGROUND COLOR #FFF 
 LOGO URL 
 FAVICON URL 
 CUSTOM FONT URL 
```
Let's replace the Auth0 logo with yours. Make sure that the logo URL uses the `https` scheme.

To update the logo, run the `auth0 branding update` command, but this time add the `--logo` flag with the URL for the logo:

```bash
auth0 branding update --logo "https://URL_OF_LOGO"
```
You'll then see another message confirming that the branding for this Auth0 domain has been updated.

```bash
=== YOUR_AUTH0_DOMAIN.auth0.com branding updated
```

You'll probably want to see the beautiful login page. Right? You can do that right from the command line without running your whole app.


## Test the New Login Screen

Testing out logins on the Auth0 dashboard is a fast process. With just two clicks on the mouse, you could have a login screen for your account up and running.

It's even faster with the CLI. First, enter the `auth0` test command with the `login` option. Next, you're asked to select which application you want to test. Then, you are asked to choose a domain. Finally, you're asked, `Do you wish to proceed?`. Type `Y` for yes:

```bash
> auth0 test login
 Client ID: Testing CLI (Eo2zq27soy4CzgCugBGGLGub3kkWvf3c)
 Custom Domain: none (use dev-training-test.us.auth0.com)
 ▸ A browser window will open to begin this client's login flow.
 ▸ Once login is complete, you can return to the CLI to view user profile information and tokens.

 Do you wish to proceed? Yes
```

After that, a browser window will open, and you'll see your new custom login page! 

![Auth0 Custom Login Page](https://images.ctfassets.net/23aumh6u8s0i/7suWtKxX7i3N3pF6OIQamW/75c6e9c156ab5aef8018ddc7ca515f42/custom_login.png)


## Summary

The Auth0 CLI takes several features from the Auth0 dashboard and puts them right at your fingertips. 

It can handle logging in and connecting to your Auth0 account. 
You can create and configure new applications. 
You can even update the colors and preview the login page! 

You can use all these features and more without leaving your terminal.

The Auth0 CLI has even more features to explore that will improve your workflow! You can find out other commands and features by reading the [Auth CLI docs](https://auth0.github.io/auth0-cli/).

Let me know in the comments what you find out! 

Customize Auth0 Universal Login with Auth0 CLI

This tutorial shows you how to create a slick-looking, full-stack, secure application using React, Spring Boot, and JHipster.

Full Stack Java with React, Spring Boot, and JHipster

Learn how to use Next.js to create server-side rendered React applications.



In this tutorial series, you'll be provided with a practical introduction to how Next.js can help you build web applications.

Created by [Vercel, a cloud company for hosting frontends and serverless functions](https://vercel.com/home), Next.js is a React framework capable of creating applications that run both on the client and the server, otherwise known as Universal JavaScript applications. This framework helps you build universal apps faster by streamlining basic features like client-side routing and page layout while simplifying advance features like server-side rendering and code splitting.

In this first part of the series, you'll learn how to create pages and a page layout [using Next.js 9](https://nextjs.org/blog/next-9), the most recent framework version at the time of writing. [Familiarity with the React library](https://auth0.com/blog/react-tutorial-building-and-securing-your-first-app/) is recommended.

## Getting Started

To start, you need to bootstrap a React project with `next` as a dependency. Anywhere in your system, create a folder named `whatabyte` and make it your current directory:

```bash
mkdir whatabyte
cd whatabyte
```

Then, initialize a default Node.js project under the `whatabyte` directory and install core dependencies by issuing these commands:

```bash
npm init -y
npm install --save react react-dom next
```

As the name suggests, `next` is the package that will allow you to use the Next.js framework in your project with all of its modules, components, and dependencies.

Next.js is flexible but has one major structural requirement for it to work. Every Next.js project needs to have a `pages` subdirectory child to the project directory. Therefore, create a new `pages` subdirectory like so:

```bash
mkdir pages
```

Every page of your web app will be defined as a React component in a JavaScript file under the `pages` subdirectory. For example, the file `index.js` represents the root path, `/` and a file named `user.js` represents the `/user` path. You'll get a more detailed explanation of these mechanics in the next section.

To make running and building your Next.js application easy, replace the NPM scripts of your `package.json` with the following:

```json
{
  //...
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },
  //...
}
```

Save the changes made to `package.json`. To run the project, execute this command in the terminal:

```bash
npm run dev
```

Head to [`http://localhost:3000/`](http://localhost:3000/) and bask in the glory of a `404` error. You haven't done anything wrong. This error shows up because the `pages` directory is empty. It needs an `index.js` file inside to render the default `/` home route. You'll do that... Next!

## Creating Your First Next.js Page

To understand how Next.js works, it helps to think about creating websites the classical way using HTML pages. The `index.html` file is the entry point of a website and it contains logic that takes the visitor to any other pages, like `about.html` and `profile.html`.

With Next.js, each page is represented by a JavaScript file under the `pages` subdirectory. Each file, instead of having HTML templates, exports a React component that is used by Next.js to render the page with the default root route being `index.js`. Go ahead and create this file under `pages` subdirectory:

```bash
touch pages/index.js
```

* Windows PowerShell:

```bash
ni pages/index.js
```

Populate `index.js` with this code:


```javascript
// pages/index.js

const Index = () => (
  <div>
    <p>Thank u, next</p>
  </div>
);

export default Index;
```

Without having to restart the app, Next.js detects the new `index.js` and the exported `Index` component and updates the view in the browser automatically.

![Next.js index page](https://images.ctfassets.net/23aumh6u8s0i/2bXaYCcMmJDNz0US5biyQb/62f0e3dbcc6d0cfe90e1e8d8f69b24dd/nextjs-practical-introduction_nextjs-index-page)

If you were using `create-react-app` to build your React application, you'd be looking here at rendering an `App` component instead. The `App` component is the parent or shell component for the whole application. With Next.js, you can think of that component as being implied through the `pages` subdirectory and hierarchy.

To achieve a uniform core interface for each page, you'd want to have a common layout that includes a header, a content container, and a navigation bar. This can be easily done with Next just like you'd do it with `create-react-app`: using components.

## Creating a Next.js Layout Using React Components

Under the `whatabyte` root directory, create a `components` directory:

```bash
mkdir components
```

The name of this directory could be really anything, but it makes sense to stick with well-understood file structure names that make it easier for anyone else to understand the structure of your application.

You need three components for creating a layout:

* `Layout` to hold the core view in place
* `Header` to provide a standard header to all views
* `NavBar` to provide navigation buttons

Thus, create the following files under the `components` directory:

* `Layout.js`
* `Header.js`
* `NavBar.js`

```bash
touch components/Layout.js components/Header.js components/NavBar.js
```

* Windows PowerShell:

```bash
ni components/Layout.js, components/Header.js, components/NavBar.js
```

Open `Header.js` and add the following code to it:

```javascript
// components/Header.js

const headerStyle = {
  backgroundColor: "blue",
  color: "white",
  width: "100%",
  height: "50px"
};

const Header = () => (
  <div className="Header" style={headerStyle}>
    HEADER
  </div>
);

export default Header;
```

In `NavBar.js` add the following:

```javascript
// components/NavBar.js

const navBarStyle = {
  backgroundColor: "red",
  color: "white",
  width: "100%",
  height: "60px"
};

const NavBar = () => (
  <div className="NavBar" style={navBarStyle}>
    NAVBAR
  </div>
);

export default NavBar;
```

In `Layout.js`, use the `Header` and `NavBar` components to render any content passed through `props.children` within a `Content` container:

```javascript
// components/Layout.js

import Header from "./Header";
import NavBar from "./NavBar";

const layoutStyle = {
  display: "flex",
  flexDirection: "column",
  height: "100%",
  width: "100%"
};

const contentStyle = {
  flex: 1,
  display: "flex",
  flexDirection: "column"
};

const Layout = props => (
  <div className="Layout" style={layoutStyle}>
    <Header />
    <div className="Content" style={contentStyle}>
      {props.children}
    </div>
    <NavBar />
  </div>
);

export default Layout;
```

These three components use inline CSS styling to give improve their structure and presentation.

Finally, update `index.js` to use the `Layout` component:

```javascript
// pages/index.js

import Layout from "../components/Layout";

const Index = () => <Layout>Welcome to WHATABYTE!</Layout>;

export default Index;
```  

![Next.js index page using a layout component](https://images.ctfassets.net/23aumh6u8s0i/69v0dEitl6ISUXJtGPylY/7b08e470423209df73b4c8340384968b/nextjs-practical-introduction_nextjs-index-page-using-a-layout-component)

> The look and feel of the interface will improve in the next part of this tutorial.

In the browser, the index page now shows a blue box serving as a header, a white box with a message serving as content, and a red box serving as the navigation bar. With a layout in place, you are ready to create more pages with a consistent structure.

## Creating More Pages Using Next.js

The _WHATABYTE_ app has four core views:

* Explore: To show trending restaurants and dishes
* Near Me: To show restaurants near the user
* My Cart: To show the orders of the user
* Profile: To show the user information such as name, address, and billing data

As you may be thinking, you'll need to add new files under the `pages` directory to represent each of these pages. You are right. The plan here is to create a route for each view:

* `/explore`
* `/nearme`
* `/mycart`
* `/profile`

To create these views, create the following files under the `pages` directory and add their respective content:

```bash
touch pages/explore.js pages/nearme.js pages/mycart.js pages/profile.js
```

* Windows PowerShell:

```bash
ni pages/explore.js, pages/nearme.js, pages/mycart.js, pages/profile.js
```

- `explore.js`:

```javascript
// pages/explore.js

import Layout from "../components/Layout";

const ExploreView = props => <Layout>{`Explore View`}</Layout>;

export default ExploreView;
```

- `nearme.js`:

```javascript
// pages/nearme.js

import Layout from "../components/Layout";

const NearMeView = props => <Layout>{`Near Me View`}</Layout>;

export default NearMeView;
```

- `mycart.js`:

```javascript
// pages/mycart.js

import Layout from "../components/Layout";

const MyCartView = props => <Layout>{`My Cart View`}</Layout>;

export default MyCartView;
```

- `profile.js`:

```javascript
// pages/profile.js

import Layout from "../components/Layout";

const ProfileView = props => <Layout>{`Profile View`}</Layout>;

export default ProfileView;
```

In the browser, you can visit [`http://localhost:3000/explore`](http://localhost:3000/explore) and see the new Explore page up and running! You can try any of the other paths as well.

<include src="TweetQuote" quoteText="Learn how to bootstrap a Next.js application to create pages and a page layout."/>

## Get Your Head In the Next.js Game

Your Next.js pages need to have a document title shown on the page tab or window title bar of the browser. To add a document title, you need to use the [`<title>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title) HTML element which can only be used within a web page's `<head>` block.

Next.js pages are created with a `<head>` block that has sensible defaults such as the following:

```html
<head>
  <title class="next-head"></title>
  <meta charset="utf-8" class="next-head">
  <meta
    name="viewport"
    content="width=device-width,minimum-scale=1,initial-scale=1"
    class="next-head">
</head>
```

However, notice that the `title` tag is empty. To modify the `head` block, Next.js offers a [built-in `Head` component](https://github.com/zeit/next.js/#populating-head) in the `next/head` module which appends elements to the `<head>` block of a page. To modify the document title, you'd nest a `title` HTML element within the `Head` component.

Since you need the document title to be present on every page, the `<head>` block should be modified within the `Layout` component template. Open `components/Layout.js` and update its content as follows:

```javascript
// components/Layout.js

import Head from "next/head";

// Component imports remain the same

// Style objects already defined

const Layout = props => (
  <div className="Layout" style={layoutStyle}>
    <Head>
      <title>WHATABYTE</title>
    </Head>

    <Header />
    <div className="Content" style={contentStyle}>
      {props.children}
    </div>
    <NavBar />
  </div>
);

export default Layout;
```

The browser tab or window hosting your page should now reflect the "WHATABYTE" title.

The `<head>` block can also contain other important metadata (data that describes data) like scripts, stylesheets, character encoding, name, and much more.

> For more information, visit the [`<head>` block](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head) and [metadata](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta#Attributes) MDN docs.

<include src="TweetQuote" quoteText="Learn how to get started with Next.js, a universal JavaScript framework based on React."/>

## Next Steps

The current layout of the application is not working as it should. The `.Content` container, within the `Layout` component, is expected to stretch out to fill the space left by the `Header` and `NavBar` components as its `contentStyle` object specifies the `flex: 1` CSS property. However, this flexible property depends on the height value of the its parent, the `.Layout` container.

Despite the `height` of the `.Layout` container being specified in its `layoutStyle` object as `100%`, this container is not filling out the full height of the viewport. In turn, this could only mean that its parent doesn't have a definite height.

If you open the browser Dev Tools and look at the structure of the Index page, you'll notice that the parent container for the app is a `div` element with the ID `__next`. Clicking on that element shows that it has no height or width; therefore, its descendant containers have no height value to inherit and use for dynamic sizing.

To fix this, you'd need to give the `__next` container a `height` and `width` of `100%`. But Next.js doesn't come with a default global index stylesheet like with `create-react-app`. The solution is to style components in the "Next.js way" or to use custom SCSS, which is the topic of the next second part of this tutorial.

## Recap

In this first part, you have learned how to use Next.js to create pages that integrate a page layout. Using a page layout gives your pages consistent high-level structure. To give the elements within each page better styling and positioning, you need to rely on CSS.

So far, you applied basic styling to your pages using inline style objects. However, Next.js offers more scalable and powerful mechanisms to apply styles to your pages. In the next part of this tutorial, your pages will go from this...

![Another Next.js view with basic layout](https://images.ctfassets.net/23aumh6u8s0i/2D9tCkdKRpVwyNcCJxThNf/94870998bf1d698363b2fdb6ddeb51e3/nextjs-practical-introduction_another-nextjs-view-with-basic-layout)

... to this!

![Next.js polished layout](https://images.ctfassets.net/23aumh6u8s0i/1URWqzEEl1HZEdGTmW8vD4/37d1dfb6885b42030cbd1fb789349274/nextjs-practical-introduction_nextjs-polished-layout)

### [Continue to Part 2: Next.js Styling and Theming](https://auth0.com/blog/next-js-practical-introduction-for-react-developers-part-2/)


Next.js Practical Introduction: Pages and Layout

olususi-oluyemi

Oluyemi is a tech enthusiast with a background in Telecommunication Engineering. He ventured into programming with a keen interest in solving day-to-day problems encountered by users. He has since directed his problem-solving skills towards building software for both the web and mobile platforms. As a full-stack software engineer with a passion for sharing knowledge, Oluyemi has published many technical articles and content on several blogs worldwide. As s tech-savvy person, his hobbies include trying out new programming languages and frameworks.

Software Engineer / Technical Content Creator

Olususi Oluyemi

Learn how to build modern and secure Full-Stack applications with React, TypeScript, and Nest.js.

Modern Full-Stack Development with Nest.js, React, TypeScript, and MongoDB: Part 1

dan-lourenco

Dan Lourenco

Learn how to programmatically authenticate against Auth0 in your Cypress tests in a manner that adheres to both Cypress and Auth0 best practices.

<div class="alert alert-info alert-icon">
  <i class="icon-budicon-487"></i>
  <strong>Important Announcement</strong><br> 
  <b>This blog post is no longer maintained and it may be out of date</b>. Please use the following resources created by the Cypress team to learn how to use Cypress to test a Single-Page Application (SPA) that uses Auth0: 

  * <a href="https://cypress.io/blog/2022/04/25/cypress-9-6-0-easily-test-multi-domain-workflows-with-cy-origin/">Cypress 9.6.0: Easily test multi-domain workflows with cy.origin</a> (Blog post)
  * <a href="https://www.youtube.com/watch?v=Fohrq5GZSD8">How to test multiple domains or origins with Cypress</a> (Video) <br>

<br />
<iframe width="560" height="315" src="https://www.youtube.com/embed/Fohrq5GZSD8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

**TL;DR:** This post discusses how to authenticate against Auth0 in your Cypress end-to-end tests successfully. You will use a small sample React application to illustrate patterns you can use to programmatically log your user into Auth0 while running Cypress tests, in a manner that adheres to most Cypress and Auth0 best practices. To see a working example of the techniques described in this article, please feel free to clone [this repo](https://github.com/dlo83/auth0-cypress-demo).

<include src="TweetQuote" quoteText="Learn how to perform end-to-end integration tests on SPAs secured with Auth0."/>

## Prerequisites

As mentioned, you will be using a React application written with modern JavaScript language features (ES2015+), so a good understanding of modern web technologies is recommended. If you’re not quite there yet, there are a wealth of fantastic resources for modern JS development, including courses from [Wes Bos](https://es6.io/), [Tyler McGinnis](https://tylermcginnis.com/), and others.

You will also need to have Node.js and NPM installed. [Check out the Node.js website](https://nodejs.org/en/download/) for download links and an installation guide.

You are also expected to have an Auth0 account and have valid user permissions so that you can authenticate into your application. So, if you don't have an Auth0 account yet, <a href="https://a0.to/blog_signup" data-amp-replace="CLIENT_ID" data-amp-addparams="anonId=CLIENT_ID(cid-scope-cookie-fallback-name)">sign up for a free now</a>.

<include src="SignupCTA" text="Try out the most powerful authentication platform for free." linkText="Get started →" />

Lastly, a basic understanding of what Cypress is and why it’s useful is expected. If you do not know Cypress, check out [this article](https://auth0.com/blog/cypress-write-automated-tests-to-validate-web-applications/) for more.

## Auth0 Setup & Configuration

To see the whole process in action, you will need to create an Auth0 Application on your Auth0 dashboard. To do so, head to [the Applications section of your dashboard](https://manage.auth0.com/#/applications) and click on the _Create Application_ button. When you click on this button, you will see a dialog. On this dialog, you will have to add a name for your application (e.g., "Cypress E2E Testing") and you will have to select _Single Page Web App_ as its type.

Now, clicking on the _Create_ button will make Auth0 redirect you to the _Quick Start_ page of your new application. From there, you can head to the _Settings_ tab and configure it as follows:

* Scroll down to the _Allowed Callback URLs_ field and enter in the following value: `http://localhost:3000/callback`. After user authentication occurs, Auth0 will only redirect successfully if the route in question is listed here.
* Enter `http://localhost:3000` into the **Allowed Web Origin** field.
* Enter `http://localhost:3000` into the **Allowed Logout URLs** field.
* Scroll down to the bottom of the **Settings** page and click **Show Advanced Settings**.
* Click on the **Grant Types** tab, and check the **Password** grant.
* Click **Save Changes**.

Now, you can create a user account for the end-to-end testing scripts. To do so, head to [the _Users_ section of your dashboard](https://manage.auth0.com/#/users) and click on _Create User_. On the dialog shown by Auth0, fill the form as follows:

* _Email_: Enter a random email address (e.g., `e2e-testing@mydomain.com`)
* _Password_: Enter a random password (e.g., `s#m3R4nd0m-pass`)
* _Repeat Password_: Enter the same password.
* _Connection_: Use the `Username-Password-Authentication`

After that, click on _Save_ to finish the process.

Lastly, you will have to go to [your tenant's settings](https://manage.auth0.com/#/tenant) and set `Username-Password-Authentication` as the value of the _Default Directory_ property. As mentioned in this page, this field defines the "name of the connection to be used for Password Grant exchanges". In this case, the `Username-Password-Authentication` value comes from the default the default [_Database Connections_](https://manage.auth0.com/#/connections/database) that Auth0 adds to all new tenants.

![Auth0's default database connection.](https://images.ctfassets.net/23aumh6u8s0i/WIYNDHA9YBusXqhZJn13E/f3750b39784c88804197a33f7b728e5b/auth0-default-database-connection)

Just don't forget to save the changes made to your tenant.

## The Sample App

First things first, clone [this repo](https://github.com/dlo83/auth0-cypress-demo) and check out the `base` branch:

```bash
# clone the repo
git clone https://github.com/dlo83/auth0-cypress-demo.git

# move into it
cd auth0-cypress-demo

# checkout the base branch
git checkout base
```

> **Note:** You can also refer to the finished product on the `master` branch. Then, be sure to `npm install` and `npm run start` in your terminal to spin up the application.

This app will be quite simple: it is a React application with a few routes, powered by React Router 4. One of the routes will be protected — that is, only accessible for authenticated users — and the other, public.

There will be one other route which serves an important purpose: the `/callback` route. This route is where the user is redirected after successfully entering their Auth0 credentials. When this route is hit, the application checks to ensure that the state information in the URL's query string matches the state stored in the persisted cookie.

If these protected route patterns are unfamiliar to you, I highly recommend checking out [Bruno Krebs' article](https://auth0.com/blog/react-tutorial-building-and-securing-your-first-app/) for more.

## Cypress

Cypress is a modern front-end testing tool that makes writing integration tests a breeze. This tool is, essentially, a one-stop shop for all your end-to-end testing needs, combining a _fast_, state-of-the-art testing framework, graphical and headless test runners, and easy-to-use assertion library in one package.

### Authentication with Cypress

So you’re sold on Cypress and you’re using Auth0 for your authentication needs. Now, it is time to see how you can make the two play nicely together!

Imagine that you want to write a test to ensure that a user can visit a page only available behind authentication. How would you do this?

The naive approach would be to:

* Visit the web application and invoke a redirect to the Auth0 login page (via a button click, route change, etc.)
* Enter in your Auth0 username and password
* Submit the form
* Wait for the redirect to your web application and proceed as needed

There’s a problem with this, though. To paraphrase co-founder of Cypress, [Brian Mann](https://github.com/cypress-io/cypress/issues/1342#issuecomment-366747803):

> The best practice is never to visit or test third-party sites over which you have no control.

Then, since you don’t have control over the Auth0 website, it doesn’t make sense to try and mimic a user’s login flow through the UI.

So what do you have to do?

<include src="TweetQuote" quoteText="Don't waste time covering services that you do not control on your end-to-end tests."/>

### Cypress Best Practices

Thankfully, a Cypress contains an [example recipe](https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/logging-in__single-sign-on) that can help you. The general pattern for dealing with Single Sign-On authentication is as follows:

*  Use Cypress’ `cy.request()` command to make an HTTP request to your authentication service (in this case, Auth0)
*  Parse the tokens in the response
*  Set tokens on local storage

> **Note:** Auth0 now recommends [using cookies in lieu of local storage](https://auth0.com/docs/security/store-tokens#don-t-store-tokens-in-local-storage). Not a problem. You will adhere to this recommendation in your implementation.

Now that you have a strategy in place, you can get started.

### Cypress Commands

As stated above, your first course of action is to make an HTTP request against Auth0 using Cypress `cy.request()` command. A request with Cypress would look something like this:

```javascript
const options = {
  method: 'POST',
    url: 'https://my.url.com/endpoint',

    body: {
      username: 'my_username'
      password: 'my_password'
      ...
    }
}

cy.request(options)
```

That's great and all, but you can imagine that having to write the code above every time you want to log in could be quite cumbersome and violate DRY (Don't Repeat Yourself) principles. Thankfully, Cypress has a feature called [Custom Commands](https://docs.cypress.io/api/cypress-api/custom-commands.html#Syntax) that allow you to encapsulate this code and make it reusable across your tests.

So, insert the following code to the end of the `cypress/support/commands.js` file:

```javascript
Cypress.Commands.add('login', (overrides = {}) => {
  Cypress.log({
    name: 'loginViaAuth0',
  });

  const options = {
    method: 'POST',
    url: Cypress.env('auth_url'),
    body: {
      grant_type: 'password',
      username: Cypress.env('auth_username'),
      password: Cypress.env('auth_password'),
      audience: Cypress.env('auth_audience'),
      scope: 'openid profile email',
      client_id: Cypress.env('auth_client_id'),
      client_secret: Cypress.env('auth_client_secret'),
    },
  };
  cy.request(options);
});
```

Now, when you want to trigger a request to authenticate against Auth0, you simply have to call `cy.login()` from your code. The custom command name to use in your consuming code (in this case, `login`) corresponds to the first argument given to the `add()` method.

OK, so you have your custom Cypress login command, but what's with the `Cypress.env` values for the keys in the body object?

### Cypress Environment Variables

Because you re providing sensitive information in your Cypress request to Auth0, you need to authenticate. And, it's imperative to store this information outside of your test suite.

At the root of your project, create a file called `cypress.env.json` and, before populating this file, add this line to your `.gitignore` file:

```gitignore
cypress.env.json
```

This ensures that you do not accidentally commit any sensitive details to your Git repository. _Please, **do not forget** this step!_

Now, back in your `cypress.env.json` file, add the following code to it:

```json
{
  "auth_audience": "https://my_tenant.auth0.com/api/v2/",
  "auth_url": "https://my_tenant.auth0.com/oauth/token",
  "auth_client_id": "my_client_id",
  "auth_client_secret": "my_client_secret",
  "auth_username": "my_username",
  "auth_password": "my_password"
}
```

You will have to update each one of the properties above with your own Auth0 values:

- `auth_audience`: For this one, you will have to replace `my_tenant.auth0.com` with your own Auth0 domain (e.g., `blog-samples.auth0.com`). You can find this information on the Auth0 application you created before.
- `auth_url`: Here, you will have to do the same thing. You will have to replace `my_tenant.auth0.com` with your own Auth0 domain.
- `auth_client_id`: In this case, you will have to use the _Client ID_ property of the Auth0 Application you created before.
- `auth_client_secret`: Lastly, for this property, you will have to use the _Client Secret_ property of the Auth0 Application you created.

![Copying the Auth0 Application properties to configure your Cypress end-to-end testing scripts.](https://images.ctfassets.net/23aumh6u8s0i/1zI1K62EuZ5hEcDcV3BgzK/f72c67890bb1f3358df8f731429806e6/copying-auth0-application-properties)

For the last two properties (`auth_username` and `auth_password`) you will have to use the credentials used while creating the end-to-end testing user.

### Configure React App Environment Variables

Cypress isn't the only tool in your application that has to take environment variables. You will have to define environment variables for your React application as well, albeit in a different file.

* Rename the `.env.sample` file in the root of the project to simply `.env`.
* Replace the `my-tenant.auth0.com` value (on the `REACT_APP_AUTH0_DOMAIN` variable) with your tenant domain (e.g., `blog-samples.auth0.com`).
* Insert your _Client ID_ for the `REACT_APP_AUTH0_CLIENT_ID` variable. Unlike the `cypress.env.json` file, there should be no quotes around this value here.

### Grant Strategies

While creating your Auth0 Application, you enabled the Password grant. But what exactly is a grant, anyway?

[Auth0](https://auth0.com/docs/applications/application-grant-types) defines a grant as follows:

> OAuth 2.0 supports several types of grants, which are methods by which you can gain access tokens. Different grant types allow different types of access and, based on the needs of your app, some grant types are more appropriate than others.

That last sentence is the key here. Normally, when authenticating with Auth0, you are redirected to log in through Auth0's hosted login page. *But*, since you are in a testing environment (and again, you don't want to test what you don't control), you have to find some other way to authenticate against Auth0 without redirecting away from your application. That's where the Password Grant comes in. The Password grant relies on authenticating a user via provided username and password credentials.

## Writing tests using Cypress Login Command

OK. You have created your Cypress Custom Command for login. Also, you have configured your Auth0 account and you have updated your Cypress environment variables. Now, you will see how you can take advantage of everything you've done to log into Auth0 programmatically using Cypress!

In your project, create a new directory called `integration` inside `cypress`. Then, add a file called `login.js` to it with the following code:

```javascript
describe('login', () => {
  it('should successfully log into our app', () => {
    cy.login()
      .then((resp) => {
        return resp.body;
      })
      .then((body) => {
        const {access_token, expires_in, id_token} = body;
        const auth0State = {
          nonce: '',
          state: 'some-random-state'
        };
        const callbackUrl = `/callback#access_token=${access_token}&scope=openid&id_token=${id_token}&expires_in=${expires_in}&token_type=Bearer&state=${auth0State.state}`;
        cy.visit(callbackUrl, {
          onBeforeLoad(win) {
            win.document.cookie = 'com.auth0.auth.some-random-state=' + JSON.stringify(auth0State);
          }
        });
      })
  });
});
```

Now, in your terminal, run the following commands from the root directory of your React project:

```bash
# install all dependencies
npm install

# run the React app on the background
npm start &

# run cypress
npm run cypress:open
```

This will make the Cypress dashboard open.

![Cypress dashboard](https://images.ctfassets.net/23aumh6u8s0i/1JdvnCY4VmEIXOFCmuoFqo/bdcdf89014bc58b285c1b2fc08ec6a21/running-the-cypress-dashboard)

From there, you can click on the `login.js` integration test in the Cypress test runner. You should now see an instance of Chrome launched, with your user automatically logged in to Auth0! Click on the **Profile** page to see your logged in user's email address for verification.

![Running the E2E testing scripts with Cypress and Auth0.](https://images.ctfassets.net/23aumh6u8s0i/4ZSK4oPQf8PXPlld8b81bI/d3a85580fa2ebc214bcab7df9d43d484/running-the-e2e-testing-scripts-with-cypress-and-auth0)

<include src="TweetQuote" quoteText="I just learned how to perform end-to-end integration tests on SPAs secured with Auth0."/>

## Wrap Up

In this article, you started by learning about one of Cypress' core tenets when it comes to testing: avoid testing sites over which one does not have control. Next, you took a quick look on _Cypress Custom Commands_ and how they make your lives easier by encapsulating repetitive testing logic. Then, you learned about _Grant Strategies_, which are methods by which you can gain access tokens. More specifically, you learned about the _Resource Owner Password Grant_ strategy, which allows you to receive a token by providing username and password credentials, thereby circumventing the need to visit the Auth0 login page.

> **Note:** Keep in mind that you must not use this grant on your public clients. This is an exception to this rule because it is an end-to-end test that won't be used by real users.

Finally, you learned about how you can use your custom login command in a test, set your access token in memory, and successfully log into your application as part of your Cypress test.

I hope you've enjoyed reading this article, and have gained an understanding of how you can incorporate Cypress into your Auth0 application. If you have any questions or concerns, please feel free to leave a comment down below.

Thanks for reading!


End-to-End Testing with Cypress and Auth0

brandon-roberts

Brandon is a Developer Advocate at Nrwl, focused on community engagement, content creation, and collaboration around Nx, the open-source build framework. He enjoys learning new things, helping other developers build web applications, sharing knowledge, collaborating with others, and contributing to open source. Brandon is a Google Developer Expert in Angular, a technical writer, and also a maintainer of the NgRx project building libraries for reactive Angular applications.

Brandon Roberts

Whether you have a single application or a suite of applications, code reuse, standards around structure, process, and feature development help to ensure your codebase remains healthy in the long term.

[Nx is a build framework for monorepos](https://nx.dev) with first-class React support. It helps accelerate the adoption of proven development practices across projects of many sizes and scopes. Nx provides additional tooling for React projects to help scale and develop features at a faster pace. 

This guide walks through some of the tooling provided by Nx, the creation, and structure of an Nx workspace, with an example to follow along with.

<AmpContent>
<amp-youtube
    data-videoid="IMWk0P6EeRc"
    layout="responsive"
    width="480" height="270">
</amp-youtube>
</AmpContent>

<NonAmpContent>
<div class='embed-container' style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;margin-bottom:40px;"><iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src='https://www.youtube.com/embed/IMWk0P6EeRc' frameborder='0' allowfullscreen></iframe></div>
</NonAmpContent>

## What are Monorepos

A monorepo is a single collection of all your source code that spans multiple applications, libraries, and languages. Everything in the monorepo is not deployed at the same time but is all located in a central repository. Many companies use monorepos for different organizations and projects. Some even use a single monorepo to house all the source code for projects across their entire company.

Here are some of the benefits of a monorepo:

* **Shared code** &mdash; Promotes reuse of validation code, UI components, and types across the code base, including code between the backend and the frontend.
* **Atomic changes** &mdash; Make changes to a server API and modify the clients that consume that API in the same commit. No more coordinating commits across different repositories.
* **Developer mobility** &mdash; Provides consistency between building and testing applications written using different tools and technologies. Developers can confidently contribute to other teams’ applications and verify that their changes are safe.
* **A single set of dependencies** &mdash; Use a single version of third-party dependencies for all your apps. Less frequently used applications don’t get left behind with a 3-year-old version of a framework library or an old version of a build tool. 

There are also a few common misconceptions with monorepos:

* Strictly co-locating your code just by placing all your code in the same repository.
* Running all the builds, tests, and quality checks on all applications for each PR or commit.
* Deploying every application on every commit to the main branch.
* Setting up multiple scripts across applications to handle common tasks.

Just because you have all your code in a monorepo, that does not mean you have run all the tests and checks on your monorepo for every single commit. This doesn't scale well and leads to bottlenecks in your development and Continuous Integration (CI) and Continuous Deployment (CD) pipelines. Nx provides integrated tooling to intelligently determine what needs to be run through code analysis, affected commands, and computation caching. 

### Affected commands

Nx uses code analysis to build a dependency graph of all projects in the workspace. It then uses the dependency graph to determine what projects are impacted based on your changes between your Git branches and the main branch. [Nx’s Affected Commands](https://nx.dev/latest/react/core-concepts/mental-model#affected-commands) use this code analysis to perform the minimum set of tasks based on what's changed. Let’s look at two applications that depend on a library as an example.

![](https://images.ctfassets.net/23aumh6u8s0i/3Msqcbm3M7zreqA7s3Yga/fa9a14ab5dd0970d45ff8603494a2530/Uploaded_from_Streamlining_a_React_Monorepo)

To see what applications are affected, use the **[nx affected:apps command](https://nx.dev/latest/angular/cli/affected-apps)**. Nx analyzes the nature of the changes and determines which projects, including applications and libraries, are impacted. In the example above, changing app1 doesn’t cause app2 to be impacted, so you don’t need to run all the pre-merge steps for app2. Alternatively, changing the lib, or packages that both apps depend on does impact both applications.

### Computation caching

Nx is smart in that it also knows the context in which you ran particular commands, the current hash of the files, and other environmental information. 

![](https://images.ctfassets.net/23aumh6u8s0i/1gsO5lGTZaluzgHVc3H3xr/f931ae116060c2def80962a764b4888b/Uploaded_from_Streamlining_a_React_Monorepo)

The image above displays an example of the information collected to build a unique hash used to identify the computation. With this information, Nx caches and stores these computations and can replay them if it seems the same computation is being run again.

This isn’t done through rebuilding source code. Only the artifacts produced from a given command are stored and replayed when possible. If Nx doesn’t find this computation, Nx runs the task, and after it completes, it takes the outputs and the terminal output and stores it locally (and if configured remotely). All of this happens transparently, so you don’t have to worry about it.

## Creating an Nx Workspace Using a React Preset

Now that you know how Nx works, let’s try it out by building a small application that lists Star Wars characters.

Start with creating the Nx workspace with a React application using the `react` preset. 

```sh
npx create-nx-workspace sw-org --preset react --appName myapp
```

After running this command, you’ll be asked to select a stylesheet format. You can choose the default for this demo. You also have the option to connect your workspace to [Nx Cloud](https://nx.app/) if you’d like.

After you make your selections, this command does the following:

- Generates a new Nx workspace
- Scaffolds out a new React application with modern tooling, including [Jest for unit tests](https://jestjs.io/), and [Cypress for E2E tests](https://www.cypress.io/).

There are other presets available, such as `next` for [Next.js](https://nextjs.org/) projects, and `react-express` for a workspace with React and Express pre-configured.

Every Nx workspace has a file structure similar to this:

```treeview
myorg/
├── apps/
├── libs/
├── tools/
├── workspace.json
├── nx.json
├── package.json
└── tsconfig.base.json
```

* `/apps/` contains the application projects. This is the main entry point for each runnable application.
* `/libs/` contains the library projects. Each library defines its external API so that boundaries between libraries remain clear. 
* `/tools/` contains scripts that act on your codebase.
* `/workspace.json` contains the configuration for each project in your workspace.
* `/nx.json` adds extra information about projects, including implicit dependencies and tags that can be used to restrict the ways projects are allowed to depend on each other.
* `/tsconfig.base.json` sets up the global TypeScript settings and aliases.

To serve up the application, enter into the `sw-org` directory and run the `serve` command using the Nx CLI:

```sh
nx serve
```

> Note: If you don't want to install Nx globally, you can use `npx nx serve` instead.

The initial application page is displayed.

![](https://images.ctfassets.net/23aumh6u8s0i/2EUaKnrpRkLehJempAp06f/a99c92b3282e79e42b16877c98cac1c9/Uploaded_from_Streamlining_a_React_Monorepo)

## Generating a Feature Library

[Generating libraries](https://nx.dev/latest/react/structure/library-types#feature-libraries) in an Nx workspace is done by using the `generate` command with the Nx CLI. Feature libraries are used to display UI to the user, which could including routing information, and could use other libraries such as shared components.

Create one now by running:

```sh
nx generate lib people
```

**NOTE** [Nx Console](https://nx.dev/latest/angular/getting-started/console) also provides a full l GUI to run Nx CLI commands in your editor with native VSCode and WebStorm support.

## Generating a Data Access Library

A "data access" library is where functionality for fetching and storing data for a feature exists. So any services necessary to manage the quotes are placed in this library. Throughout building applications, there will be data access libraries across multiple features.

Create the data access library by running:

```sh
nx generate lib data-access
```

**NOTE** You can also create your custom generators similar to the `library` generator inside an Nx workspace. This provides more flexibility to create more standards around your development processes and guidelines. Read more about workspace generators in our [Workspace Generators](https://nx.dev/latest/angular/generators/workspace-generators) guide.

Update the data-access library to fetch the characters from the Star Wars API.

Open up `data-access.tsx` and replace it with the following:

```js
import { useEffect, useState } from "react";

export interface IPerson {
 birth_year: string;
 eye_color: string;
 films: string[];
 gender: string;
 hair_color: string;
 height: string;
 homeworld: string;
 mass: string;
 name: string;
 skin_color: string;
 created: Date;
 edited: Date;
 species: string[];
 starships: string[];
 url: string;
 vehicles: string[];
}

export interface Response<T> {
 count: number;
 next: null | string;
 previous: null | string;
 results: T[];
}

export function usePeople(page: number) {
 const [people, setPeople] = useState<IPerson[]>([]);

 useEffect(() => {
   fetch(`https://swapi.dev/api/people/?page=${page}`).then((r) =>
   r.json().then(data => data.results)
 ).then(data => {
     setPeople(data);
   });
 }, []);

 return people;
}
```

Now update the people feature at `people.tsx` to list out the characters:

```js
import { usePeople } from '@sw-org/data-access';
import './people.module.css';

export function People() {
 const people = usePeople(1);
  return (
   <div>
     <h1>Star Wars People</h1>

     <ul>
       {
         people.map(person => (
           <li key={person.name}>
             {person.name}
           </li>
         ))
       }
     </ul>
   </div>
 );
}

export default People;
```

Replace the `App` template with the `People` component

```js
import styles from './app.module.css';

import { People } from '@sw-org/people';

export function App() {
 return (
   <div className={styles.app}>
     <People/>
   </div>
 );
}

export default App;
```

Refreshing the application shows a list of characters.

![](https://images.ctfassets.net/23aumh6u8s0i/3wmVIH8Sqz1ejavorzIzsI/99c44e96e4e44149da2e72e5e328baad/Uploaded_from_Streamlining_a_React_Monorepo)

The list of characters is simple. The business and data logic is kept in libraries. As your applications grow, the number of libraries grows along with it, but the applications remain relatively small and are only used for integrating core functionality for the app to run.

## Dependency Graph

Nx knows the dependencies between projects in your workspace and can generate your dependency graph visually at any point in time. 

Run the **nx dep-graph** command to see the current state of the workspace.

```sh
nx dep-graph
```

This displays the application, E2E project, and the two libraries. 

![](https://images.ctfassets.net/23aumh6u8s0i/4oiIpWdF5wIpz6y5qJkGA4/9a8802092e0de9c1a0e5c9e25d9828d7/Uploaded_from_Streamlining_a_React_Monorepo)

**NOTE**: You can also have the dependency graph auto-refresh with the `--watch` flag.

You can also see what projects are impacted by a given change. Make a change to the App.tsx, such as removing the `className`, save, and run the **nx affected:dep-graph** command.

```sh
nx affected:dep-graph
```

This displays the **myapp** and **myapp-e2e** highlighted in red as affected projects.

![](https://images.ctfassets.net/23aumh6u8s0i/2S5DueXJUNdbbguneKUjGJ/cc397167e5dc78a1835ab2db57b6dacb/Uploaded_from_Streamlining_a_React_Monorepo)


**NOTE:** The **myapp-e2e** application is directly tied to mapp, but is implicitly linked through the **nx.json** file. Read more about Nx configuration here.

### Using Affected Commands

Nx provides affected commands to run certain tasks against affected projects. For example, make a change to the `data-access` library, and run **nx affected:build**. 

```sh
nx affected:build
```

Nx finds the affected applications impacted by changing the **data-access **library and runs the **build** target for each one of them. That way, **only** the affected projects are built for the given change, and not every project in the monorepo. The same commands work for **test**, **lint**, and **e2e**, and others.

There is also the **nx affected** command that works with any defined target. The alias for **nx affected:build** is:

```sh
nx affected --target=build
```

This allows you to run any target based on the affected projects.

### Using Computation Caching

Along with affected commands, Nx supports[ computation caching](https://nx.dev/latest/angular/core-extended/computation-caching) to never execute the same computation twice. This computation cache is pluggable and can be distributed. Taking `**myapp`** as an example, run the build for `myapp` twice.

```sh
nx build myapp
```

When running the same command the second time without changes, you immediately get the cached results from the previous computation. The computation cache is done locally, but can also be distributed and extended to the rest of your team and organization. 

[Nx Cloud](https://nx.app) is one such option to distribute your computation cache. It includes a free tier with 5 hours of saved time per month, enterprise options, and is free for open-source projects.

## Summary

Nx provides modern tooling including code analysis, code generation, code analysis, affected commands, and computation caching to scale your application development using a monorepo.

What did we cover?

- Monorepos and why you should use one
- Nx workspace structure and standardization
- Smarter tooling with code analysis, affected commands, dependency visualization, and computation caching.

Find out more with the following resources:

* Documentation at [https://nx.dev](https://nx.dev)
* Free [Egghead course](https://egghead.io/playlists/scale-react-development-with-nx-4038) on Scaling React Development

Streamlining a React Monorepo

matthew-casperson

Technology enthusiast since my first C64. I love writing about new ideas and working with great people.

Product Manager at Octopus Deploy

Matthew Casperson

Learn how to integrate a browser client to reactive streams published by a Spring WebFlux server.

Reactive Streams with Kotlin, Webflux, and rsocket-js

philippederyck

Philippe De Ryck helps developers protect companies through better web security. His Ph.D. in web security from KU Leuven lies at the basis of his exceptional knowledge of the security landscape. As the founder of Pragmatic Web Security, Philippe delivers security training and security consulting to companies worldwide. His online course platform allows anyone to learn complex security topics at their own pace. Philippe is a Google Developer Expert and an Auth0 Ambassador/Expert for his community contributions on the security of web applications and APIs.

Web Security Expert, Founder of Pragmatic Web Security

Philippe De Ryck

Learn how Trusted Types help eradicate DOM-based XSS in frontend Angular and React applications.

Securing SPAs with Trusted Types

square-2

I develop software for a living, and then I go home and continue thinking about software because I just can’t get enough. I’m a full-stack engineer with infrastructure skills. I’ve led multiple agile delivery teams, being an individual contributor, driving architecture topics, and coaching and supporting other team members.<br>
I believe in high-quality software and advocate for Continuous Delivery, Test-Driven Development, and quick iteration. I <a href="https://hceris.com/blog">write</a> and <a href="https://hceris.com/talks">speak</a> about my experience regularly. Needless to say, all the opinions expressed in this blog are mine and only mine.

Staff Engineer

Mario Fernandez

Let's migrate a React application built with Redux to the Context API and see how it looks like

From Redux to the Context API: A Practical Migration Guide

andrea-chiarelli

I have over 20 years of experience as a software engineer and technical author. Throughout my career, I've used several programming languages and technologies for the projects I was involved in, ranging from C# to JavaScript, ASP.NET to Node.js, Angular to React, SOAP to REST APIs, etc.

In the last few years, I've been focusing on simplifying the developer experience with Identity and related topics, especially in the .NET ecosystem.

Principal Developer Advocate

Andrea Chiarelli

Learn how to create real-time web applications by using the Server-Sent Events specification.

Developing Real-Time Web Applications with Server-Sent Events

Traditionally, starting a new React application means adding Redux for state management. Let's talk about the Context API as an alternative

If you're bootstrapping a new [React](https://reactjs.org/) application today, ingrained habits might lead you to pick [Redux](https://redux.js.org/). After all, you **need** to manage the state. _Should you start with Redux, though?_ That has become a valid question. The latest versions of React have improved their offerings for state handling massively. In this post, I want to talk about a simpler approach, using the Context API instead.

## Let's Reminisce: Why Did We Embrace Redux?

A structured approach to state transitions in frontend applications wasn't always the norm. I remember trying to update multiple places in an application back when we were still using jQuery. That wasn't a pleasant experience.

![A change in the application triggers a cascade of updates that is very hard to track](https://images.ctfassets.net/23aumh6u8s0i/7qFbGf6yM0yMZer22wTT00/16ba7438ca2858714830a8b2b23b0070/a-change-triggers-a-cascade-of-updates-and-changes-to-an-application.png)

A change in one place leads to an update somewhere else. Now we need to patch that code as well. But then, there is a third area of the page that depends on the first two. At this point, the logic is convoluted and complex, and the snowball is just getting started.

Compared to that, Redux was eye-opening:

- The complete state of the User Interface (UI) is represented as an object.
- Any action that can modify the state is an object that contains data.
- Pure functions (reducers) ingest those actions and morph the state.
- Through selectors, we shape the data in the state for easy consumption for our components.

It seems self-evident now. But it was magical at the time.

![How changes flow through an application using Redux](https://images.ctfassets.net/23aumh6u8s0i/165hsFXreQt9XPGGSLQ1ju/14550278099b9c50d693cb0e4c096baa/change-flow-through-an-application-using-redux.png)

All the reasons that brought us here still apply. But the context has changed.

## Should Redux Be the Default When Starting a Project?

React's ecosystem has evolved quite a bit lately. Two additions have transformed the landscape and opened new possibilities:

- [Hooks](https://reactjs.org/docs/hooks-intro.html)
- [Context](https://reactjs.org/docs/context.html)

With those two, managing state across a hierarchy tree and triggering side effects is easier than ever. So easy that I claim that Redux is no longer necessary in many cases.

Most frontend applications don't have the rich flow of data that justifies introducing Redux. If you're only fetching some data from an API plus some basic interactions, then Redux is probably overkill.

### The over-abstraction trap

Forms are an example that hit close to home. I've built complex forms using Redux, helped by some supporting libraries. As complexity grows, things get messy. And for what? In the end, the state contained in a form tends to be fairly local. There is little need of exporting a detailed representation of the current state of a bunch of input controls.

Modeling something like a form with Redux can lead to a path of pain. Is the state truly global? A specialized library will often do the job just fine. Nowadays I recommend [Formik](https://formik.org/) for this problem. It's built for that purpose and will cover most requirements you can think of.

## An Alternative: Leveraging the Context API

### What is the Context API?

Let's go to the source to find out:

> Context provides a way to share values between components without having to explicitly pass a prop through every level of the tree.

The Context API is meant to solve the [prop drilling](https://kentcdodds.com/blog/prop-drilling/) problem. You have a component that owns some state. A child component wants to access it. If you pass it through `props` every intermediate component becomes aware of it, even if it's not being used at that level. That adds coupling between the different components that form that part of the page.

I've seen Redux used to handle the challenge of providing state access to components that are further away from the source. For this scenario, the Context API is a valid alternative. One that doesn't need an extra library, bootstrapping code, and further complexity.

### How does it work?

The Context API has two main components. First, we have a `Provider` where we keep the relevant state. It is equivalent to the store in Redux. It can be statically initialized or fetched dynamically. Combined with the `useState` and `useEffect` hooks, we can build the logic we need to keep it up-to-date with little effort.

The second part is the `Consumer`. Any component that is rendered below the `Provider` has access to the information stored in it thanks to it. Another hook, [useContext](https://reactjs.org/docs/hooks-reference.html#usecontext) makes the syntax even more lightweight. Consumers get re-rendered on updates to the state.

Essentially, we're reproducing the store and connecting to the store, which is what we'd do in Redux. But we have far less code and abstractions involved.

### One example: High-level configuration

Let's say we're storing information that is relevant for the whole application. For example, the theme that dictates how other components are displayed. In general, a configuration that influences most components. That probably won't change during the lifetime of the application. If we put it in a `Provider`, every component that needs it can access this state easily.

Theming is such a clear use of Context that it's basically the canonical scenario. It's the example mentioned in React's official documentation as well.

### Another example: Fetching information from a REST API

Imagine you divide your application into subpages, each with its separate URL. The data transfer between pages is limited. Each subpage is practically a small independent application. When you render one of these pages, it needs to fetch data from an API.

However, inside the subpage, the data might be used everywhere. There is no clear component that can assert ownership over the data. I like handling this scenario with the Context API as well. We have a `Provider` that wraps the page and fetches the data asynchronously by contacting a [backend for frontend](https://samnewman.io/patterns/architectural/bff/). That information is stored in the provider. After this, every component on the page uses the data without having to worry about the remote interaction. Thus, we contain that to a component that we test dedicatedly, making the others more independent.

As mentioned, the use of hooks reduces the complexity significantly. Moreover, we avoid having to deal with lifecycle methods, which is a common source of subtle errors.

![A provider retrieves data from a remote endpoint, stores it, and makes it available for consumers](https://images.ctfassets.net/23aumh6u8s0i/3EgqUpLfKTOqDL6PGJIojV/7253922bf0e0f1134b1679e7d5f00702/provider-retrieving-data-from-a-remote-endpoint.png)

### Caveat: The Context API is not for every use case

The Context API is a convenient tool that has a low barrier to adoption. But we have to be aware of its limitations. If the data stored as a value in a `Provider` changes, the whole tree under it will be re-rendered. If you save state that frequently mutates high up in your component hierarchy, that'll lead to flickering. It may compromise the experience of the application. Measuring the performance of your application regularly helps to prevent nasty surprises.

Apart from that, we have to consider how to mutate the state. We can enhance our state stored in the `Provider` with a function to change the state. That way, the components are not merely passive consumers. And closing the cycle, we might long at some point for Redux's Action -> Reducer -> State loop. We can do this as well without Redux.

## Reducers Without Redux

You might be used to Redux's model by now. Modeling state transitions through reducers has become a well-understood problem. It's supported by high-quality libraries like [immer](https://github.com/immerjs/immer). This idea of forsaking Redux sounds scary and revolutionary.

Do not despair, though. You can benefit from Redux's ideas without using Redux the library. The [useReducer](https://reactjs.org/docs/hooks-reference.html#usereducer) hook brings the power of reducers. Once again, the hook syntax makes the code less dense and easier to follow. You keep using reducers as you were before. As an added benefit, it comes in React out of the box.

## Conclusion

This article is not about rejecting Redux. The ideas behind Redux are as valid as ever. Using Redux makes sense if your application is sufficiently complicated. But considering your circumstances is crucial when making an informed decision. React is constantly improving, and it's getting easier to do state management natively.

Developers tend to have a hard time predicting the evolving needs of a system. Given this fact, I advise [building an evolutionary architecture](https://evolutionaryarchitecture.com/). Try to start simple. If your code is structured thoughtfully, there is always the possibility of adding Redux later, as the requirements become clearer. Likely, you'll never reach this point. This approach thus saves you time and lets you iterate faster in reaching your goals. That is a better alternative than introducing technology for the sake of technology.


Starting a New App With Redux? Consider Context API First

kapehe-jorgenson

Kapehe is an R&D Content Engineer for Auth0 with a passion for learning and teaching. With her primary focus on ReactJS and JavaScript, she is impressed with what code can create for the web. Technology and web development are constantly evolving and naturally bring that need for continual learning. She enjoys writing tutorials, hosting local meetups, and learning with others to expand coding knowledge.

R&D Content Engineer

Kapehe Jorgenson



**TL;DR:** - In this article, we are going to go over the new updates and features added in the major release of the `create-react-app` tool. We will go over the changes that ReactJS announced and what we can find in this great update. We will also go over the addition of TypeScript support and how that can benefit your project.

## Create React App 2.0 - The Big Reveal

On October 1, 2018, [ReactJS tweeted](https://twitter.com/reactjs/status/1046933146736963587) their release announcement of [Create React App 2.0](https://reactjs.org/blog/2018/10/01/create-react-app-v2.html). 

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">We’ve just released Create React App 2.0, including a year’s worth of improvements. <a href="https://t.co/O2AjlHOUjp">https://t.co/O2AjlHOUjp</a> <a href="https://t.co/sV8YbY7IED">pic.twitter.com/sV8YbY7IED</a></p>&mdash; React (@reactjs) <a href="https://twitter.com/reactjs/status/1046933146736963587?ref_src=twsrc%5Etfw">October 2, 2018</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## The Useful Create React App

Once released, developers were excited, to say the least. If you have used ReactJS, chances are you have used the bash command:

```bash
create-react-app name-of-app
```

Once that command starts running, you get to sit back and relax. You will see that ReactJS is taking care of all the setup and configuration. Once it’s finished, the `package.json` is compiled, starting dependencies are installed, and it gives you the initial project structure. What’s in this new and flashy Create React App 2.0? Let’s check it out!

<include src="TweetQuote" quoteText="On October 1, 2018, ReactJS tweeted their release announcement of Create React App 2.0. Once released, developers were excited, to say the least."/>

## Sass and CSS Modules

Have you ever had to install Sass loaders yourself? Have you had to configure [Sass](https://sass-lang.com/) throughout your project yourself? Well now, in Create React App 2.0, you can get Sass running in your project with a simple bash command and some file name changes. Run:

```bash
npm install node-sass
```

Change your `src/App.css` to `src/App.scss` and make sure to update that file name in the top part of `src/App.js` and you are ready to use and reuse your stylesheets. It’s great!

## Babel 7

[Babel](https://babeljs.io/) released their Babel 7 version this year as well and it did not take long for React to switch over. You can learn all about the new [Babel 7 features here](https://babeljs.io/blog/2018/08/27/7.0.0). Babel is important because it converts ES6 into code that browsers can read.  Babel 7 is faster, can now parse TypeScript syntax, and even gives support for the React fragment syntax.

Want to learn more about React fragments? Dive into the [React docs on Fragments](https://reactjs.org/docs/fragments.html#short-syntax).

## Webpack 4

React, having always used [Webpack](https://webpack.js.org/), has now updated to Webpack 4. Webpack 4 is much faster, decreases your build time, and allows you to set up a particular environment whether it's development or production.

![Webpack 4 logo - JavaScript module bundler](https://images.ctfassets.net/23aumh6u8s0i/72d1mUghQG0alzmyZsIM9r/87b1d6cf5fad0164df47e1e6f79c1079/webpack-4-logo)

In short, it is a module bundler for JavaScript applications and version 4 splits the bundles into a more intelligent and better performant way. There is so much that goes with Webpack 4, if you want to learn more about it, you can [visit the Webpack website here](https://webpack.js.org/).

<include src="TweetQuote" quoteText="React has now updated to Webpack 4, a module bundler for JavaScript applications."/>

## Jest 23

When Create React App 2.0 came out, they launched it with that latest version of [Jest](https://jestjs.io/). Jest 23 is more stable and much quicker, which will help you when running tests. You’ll feel more confident with more immediate feedback and reliable results.

![Jest logo - An open-source testing framework](https://images.ctfassets.net/23aumh6u8s0i/3lWxbu0X1JZtfNmfOZM2hg/d5d74ad73a0040712d26427e94de0eae/jest-logo)

Jest is an open-source testing framework that has just been updated to version 23. It has some great new features. One of those updates is the new watch menu option called Interactive Snapshot Mode. You are able to look through each snapshot and review your failed ones. While reviewing you can choose to update or skip each one. Jest has a great list of some of the updates that you can find [here on Jest’s blog](https://jestjs.io/blog/2018/05/29/jest-23-blazing-fast-delightful-testing#interactive-snapshot-mode).

## PostCSS

PostCSS, a great tool with over 200 custom plugins has been added to Create React App 2.0. By using JavaScript, you are able to easily transform your CSS. Create React App did not have this neat feature, but the team at React thought that adding this in would be a great for developers. I would have to agree!

If you were to head over to [PostCSS.org](https://postcss.org/) you would see a list of features that come with PostCSS.

* Increased code readability
* Converts modern CSS into a more readable version for browsers
* Uses [CSS Modules](https://github.com/css-modules/css-modules) which keeps all class and animation names local
* Utilizes [stylelint](https://stylelint.io/), a modern CSS linter
* Offers a powerful grid system

## Apollo, Relay Modern, MDX, and other third-party Babel Macros transforms

Imagine being able to use a third-party platform like [Apollo](https://www.apollographql.com/), [MDX](https://mdxjs.com/), or [Relay Modern](https://facebook.github.io/relay/) without extra configuration or setup. There is no longer the issue of being able to use Babel Macros without ejecting first, Create React App 2.0 is taking care of that setup for us.

Check out this tutorial on [how to create a React app with MDX](https://auth0.com/blog/how-to-build-an-app-with-react-and-mdx/?utm_source=linkedin&utm_medium=sc&utm_campaign=mdx_react).

## SVG

We have all seen an SVG tag:

```html
<svg width="100" height="100">
   <circle cx=“50” cy=“50” r=“40” stroke=“blue” stroke-width=“5” fill="black" />
</svg> 
```

This one is a simple circle but some SVG tags can get pretty long and confusing. SVG’s are great because they allow for cleaner looking lines, richer color, and change your images into code.

What if I told you that now you can import an SVG as a React component?

Simply import the component at the top:

`import SVGIcon from "./svgicon";`

And use it down within the file:

`<SVGIcon name="image" width={50} fill={red} />`
or
`<SVGIcon />`

This can give a lot of flexibility in where you use your SVG’s and allows for better readability.


## Yarn Plug’n’Play

Hmmm, getting rid of the `node_modules` seems far-fetched but this experimental [Yarn](https://yarnpkg.com/en/) Plug’n’Play allows for just that. If you look at the bullet points in [this GitHub PR conversation](https://github.com/yarnpkg/rfcs/pull/101), you’ll see that there are some awesome aspects to it:

* Installs ran using Plug'n'Play are up to 70% faster than regular ones.
* Starting from this PR, Yarn will now be on the path to make yarn install a no-op on CI (Continuous Integration).
* Yarn will now be able to tell you precisely when you forgot to list packages in your dependencies.
* Your applications will boot faster through a hybrid approach of static resolutions.

This is something that if you want to try out in your React project, go ahead. This feature is just a fun new add-on that is completely optional.

Here you'll see [Dan Abramov](https://twitter.com/dan_abramov) trying out Yarn Plug-n-Play:

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">I’m trying out Yarn Plug’n’Play and it’s pretty incredible. This GIF is *not* speeded up. I literally created a project in five seconds (on a warm cache). No node_modules. It works. <a href="https://t.co/AjJP5vXxEi">pic.twitter.com/AjJP5vXxEi</a></p>&mdash; Dan Abramov (@dan_abramov) <a href="https://twitter.com/dan_abramov/status/1047583342072406022?ref_src=twsrc%5Etfw">October 3, 2018</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## Proxy Implementation

Want to configure your own proxy? Create React App 2.0 let’s you do that now!

All you need to do is install the dependency:

```bash
npm install http-proxy-middleware
```

And then create a file called `src/setupProxy.js`. Once you import that dependency, you are ready to go! It’s that easy to get it started!

## Use packages written for latest Node versions

Use any Node version package and with the help of Babel 7 and Webpack 4, it won’t break the build. You will not need to do any addition configuration and will feel confident that it’s being bundled correctly.

## A Smaller CSS Bundle

Chances are you are going to be pointing your project towards modern browsers. If you decide to only target those, maybe a smaller CSS bundle would be beneficial for your project and you could experience faster load times by making fewer requests.

Avoid targeting the following:

`-webkit`
`-ms`

in your CSS and that will help in keeping those bundled. Instead point the browsers to the `package.json`.

## Service Workers

Service workers are now opt-in and are built using [Google’s Workbox](https://developers.google.com/web/tools/workbox/). Workbox is a JavaScript library that gives offline support to your project. It can help with your project’s performance and resilience by caching assets such as: 

* Fonts
* Images
* JavaScript
* CSS
* Other files

## The Addition of TypeScript

[TypeScript](http://www.typescriptlang.org/), an Object-oriented programming language, can be beneficial to use versus JavaScript. Some strong benefits of using TypeScript are:

* It can help find errors more efficiently.
* Checks for "types" being correct.
* Same syntax as JavaScript, so easy to start with.

When starting your React project with `create-react-app`, simply add to the bash command:

```bash
--typescript
```

to add TypeScript to your project.

### Add TypeScript To Create React App Project

There are two ways to get TypeScript active in your project.

Add it into an already existing project:

```bash
npm install --save typescript @types/node @types/react @types/react-dom @types/jest
```

or add it in at the beginning of a new project:

```bash
npx create-react-app name-of-app --typescript
```

Files that end in `.js` change to `.tsx` and you are good to go.

`src/index.js` --> `src/index.tsx`

If you add TypeScript to an already existing project, be sure to restart your development server to get the new changes going. You can find the documentation on this new [TypeScript addition here](https://facebook.github.io/create-react-app/docs/adding-typescript).

## Moving Forward with Create React App 2.0

With React’s new Create React App 2.0 being released, the next thought is, “Should I update all my past projects to 2.0?”. Unless it’s broken, just leave it as is. But in the future, when using the command `create-react-app` to start your project, you’ll know you have so many new features to help you build an amazing project.

To find out which version of Create React App you are using in a particular project, head on over to your `package.json` and find this line telling you which version you are currently utilizing:

```json
"react-scripts": "2.0.3"
```

This is also the place where you would update to 2.0 if desired.

Happy coding!

<include src="asides/AboutAuth0" />


Create React App 2.0: What's New?

tyler-clark

Tyler works as a developer advocate engineer at Auth0. He's worked as an engineer at small to enterprise level companies and loves everything about tech. You'll frequently find him ether out with his family, playing sports, or coding something. He's also an instructor on <a target='_blank' rel='noopener noreferrer' href='https://egghead.io'><strong><b>egghead.io</b></strong></a>, and his profile is online at <a target='_blank' rel='noopener noreferrer' href='https://tylerclark.dev'><strong><b>tylerclark.dev</b></strong></a>.

Senior Developer Advocate Engineer

Tyler Clark

Easily add custom messages to a two-way mirror, powered by a Raspberry Pi

Dad's in a Meeting... Creating a Raspberry Pi Smart Mirror

5e074956ee8ba1fea26e30d28c190495?s=300 avatar

5e074956ee8ba1fea26e30d28c190495?s=300

Full stack developer creating content at Auth0. I love taking a deep dive into hard-to-understand concepts and creating content that makes them easier to grasp. In my free time you can usually find me reading, hanging out with my dogs, or curling in the squat rack.

Former Developer Content Manager

Holly Guevara

99c4080f412ccf46b9b564db7f482907?s=200 avatar

99c4080f412ccf46b9b564db7f482907?s=200

I'm currently a Senior Developer Advocate at MongoDB. I'm also a Google Developer Expert for Web Technologies and spend most my time giving talks at conferences and meetups, mentoring developers and running workshops, and creating online content to help technology professionals.

Former Auth0 Employee

Ado Kukic

Practice Go and React by building and authenticating a RESTful API with JSON Web Tokens (JWTs).

Authentication in Golang with JWTs

A practical tutorial showing how to create Web Components using Stencil.

Creating Web Components with Stencil

Learn how to use Web Components technologies to build a login button that works in any JavaScript framework.

Beyond JavaScript Frameworks: Universal Login Button Component

Learn how to build modern and secured Full-Stack applications with React, TypeScript, and Nest.js.

Modern Full-Stack Development with Nest.js, React, TypeScript, and MongoDB: Part 2

idee

Software Engineer building with Kotlin and Flutter.

Software Engineer at Busha

Idorenyin Obong

Learn how to build React apps with MobX and secure them with Auth0.

Building and Securing MobX Apps with Auth0

akash-joshi

I'm a Software Engineer by profession and also an author at Flexiple (www.flexiple.com) and Remote.tools (https://remote.tools). I love exploring the React ecosystem in my apps and articles.

Akash Joshi

Learn how to build a Wikipedia App with React Hooks and secure it with Auth0

Building a Wikipedia App Using React Hooks and Auth0

React Conf 2019 was a success! We learned, we laughed, we connected!



React Conf 2019 happened!

If you found yourself in Lake Las Vegas this past weekend, chances are you saw some of the coolest new UI designs for Facebook, learned about how [React Native](https://facebook.github.io/react-native/) apps are helping change world hunger, and learned loads about [React Suspense](https://reactjs.org/docs/concurrent-mode-suspense.html). React Suspense? That is React’s system for handling the loading of things like code, data, and images. (Don’t worry, we’ll talk about all this stuff!)

![The stage at React Conf](https://images.ctfassets.net/23aumh6u8s0i/1vAxvKEfaEce6dIlvdyEji/933f1c4268b9c684138460a0ae841cd5/stage)

Located about 20 minutes from the famous Las Vegas Strip, Lake Las Vegas sits in a quiet little nook of the valley. Held at the Westin hotel, [React Conf](https://conf.reactjs.org/index.html) had over 600 attendees that came from all over the world to learn about all things React. Facebook sponsored the conference and they put on a great show!

The line up of speakers was fantastic and you could feel the energy in each of them! From [Tejas Kumar](https://twitter.com/TejasKumar_) showing us how to display dogs and gifs using GraphQL all the way to [Sophie Alpert](https://twitter.com/sophiebits) live coding everything from her slides to her demo code to build her own ReactDOM. WHAT?!

Each speaker was on-point. And while I won't go over each speaker, they were all equally fantastic!

<include src="TweetQuote" quoteText="Held at the Westin hotel, React Conf had over 600 attendees that came from all over the world to learn about all things React."/>

## Day 1

## Tom Occhino and Yuzhi Zheng &mdash; Keynote

The day started with the keynote by Tom Occhino and Yuzhi Zheng.

### Tom Occhino

Tom started his talk out by speaking about the first React conference. How at that conference React Native was introduced to the world! React’s goal is to create great developer and user experiences.

He spoke on the DX (Developer Experience) and that it needs three things:

1. Low barrier to entry
2. High productivity
3. Ability to scale

My favorite quote from his talk was: “Learning React does not mean you don’t need to learn about JavaScript or anything about the web and learning React Native does not mean you don’t need to learn iOS, Android, or Windows. What it means is that you don’t need to develop a deep level of understanding of all of these things first. You can get started quickly.”

### Yuzhi Zheng

Yuzhi’s talk covered some of the projects that the React core team has been working on over the past year! Yuzhi is the Engineering Manager for React core team and the Relay team at Facebook.

Some of the exciting projects that the React core team is working on are:

* Accessibility by adding in features so developers can add in accessibility easily
* Improve initial render time by using server-side rendering the team is improving load times
* React Suspense will help improve the user’s experience by handling the loading of different elements.

## Frank Yan and Ashley Watkins &mdash; Building the New Facebook With React and Relay

### Frank Yan

The original Facebook was built with PHP. It soon grew to include CSS, vanilla JS, Flux, React, and Relay.

Facebook wanted a better user experience by adding:

1. Modern Design System
2. Improved Accessibility
3. Faster Page Loads
4. Seamless Interactions

Facebook had to re-think and re-build to add these in. They used [React](https://reactjs.org/), [GraphQL](https://graphql.org/), and [Relay](https://relay.dev/).

## Ashley Watkins

Ashley followed Frank and started with how React, GraphQL, and Relay were going to help Facebook fetch and manage the data. When she talked about data she meant anything needed from an API like the user's name.

She had a lot of awesome videos showing how the data loads on the page for the user and how Facebook is changing that loading experience by utilizing GraphQL and Relay. 

One important concept for facebook is "Time to First Paint." They wanted to have a better view while items loaded for the user so that it was more fluid and effective.

## Tania Papazafeiropoulou &mdash; How Our Team is Using React Native to Save the World

Food waste is a huge problem in our world and Tania is taking the first steps in order to solve that problem. There's a team that built a React Native app in only three months that is intended to help this food waste problem.

1/3 of all food produced is wasted. We can do better. Tania and her team created an app called [OLIO](https://olioex.com/). OLIO allows for people to connect and give away their extra food. 

The team was able to re-use components by using container patterns, they were able to use [Hermes](https://facebook.github.io/react-native/docs/hermes/) that helps with memory usage and creates a smaller app size, and to have the ability to use OLIO on the browser. This is great! You could tell the crowd at React Conf was excited for OLIO.

## Tejas Kumar &mdash; Using Hooks and Codegen to Bring the Benefits of GraphQL to REST APIs

Coming back from the morning break, Tejas started us off. He talked about "REST and GraphQL and Stuff."

He built an app live on stage that pulled data from the Giphy API using React Hooks, automatically generated from an OpenAPI document. These hooks were fully type-safe and enabled predictable code and end-to-end type-safety.

The main takeaway from his talk? 

* Types are your friends
* Tests are your friends
* Nothing is impossible 
* Get creative

## Sophie Alpert &mdash; Building a Custom React Renderer

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">💥 Live Now! 💥 <a href="https://twitter.com/sophiebits?ref_src=twsrc%5Etfw">@sophiebits</a> LIVE CODING! 💥 to a packed room 💥 <a href="https://t.co/WUQxgTUkNk">pic.twitter.com/WUQxgTUkNk</a></p>&mdash; Kapehe @ React Conf (@kapehe_ok) <a href="https://twitter.com/kapehe_ok/status/1187440627346100225?ref_src=twsrc%5Etfw">October 24, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Have you always wanted to build your own ReactDOM in less than 30 minutes? Well, Sophie did just that.

Her talk was 100% live coded, even the "slides," and she manipulated the default React `App.js` file view to show her DOM in action.

She created a `ReactDOMMini` file where she manipulated her own DOM and allowed for the creative changes. Those changes? 

1. Click on the React spinning logo and make it disappear
2. Created a blinking color effect on the "Edit src/App.js and save to reload" line in the file. 

## Day 2

![The stage at React Conf](https://images.ctfassets.net/23aumh6u8s0i/5OXaV1hnFMhMSqf6yvokcO/c16efde48c3e76c4b1e342f93438b969/stage-2)

## Brian Vaughn &mdash; React Developer Tooling

Focusing on the developer experience, Brian focused on three major things for React Developer tooling:

1. Write code quickly: Speeding up the process of writing components
2. Debug code effectively: Streamlining the process of debugging and performance profiling applications
3. Update code easily: Making it easier to stay up to date on the latest React features

He doesn't want React developers to stop what they are doing but rather speed up what they are doing with these new tools. 

He also showed us how we find the components and inspect them directly in the console. You can also change the type of props and add new props in the React developer tools. 

Big new feature! Hooks are supported at the same level as `props` and `state`! Ok, but what does this mean? Values can now be edited and nested arrays and objects can be expanded! 

There are so many more new and improved updates! [Check them all out](https://reactjs.org/blog/2019/08/15/new-react-devtools.html)!

<include src="TweetQuote" quoteText="React Developer Tools will help developers speed up what they are already doing."/>

## Alexandra Holachek &mdash; Progressive Web Animations

There are a lot of things happening behind the scenes when it comes to mobile animations. Notice how there's a little bounce to some elements when your finger lets it go on the screen? Or a carousel of photos that keep scrolling even after our finger has lifted off the screen?

There are effects like the rubberband effect. It's what I was talking about before where you can pull up on a menu or a footer and it'll bounce in a rubberband way to show its max expanded limit.

Alexandra showed that there are tests they run that will "predict" what the user is trying to do. For example, if you are scrolling through your inbox, you cannot possibly do a perfect up and down swipe every single time. So it predicts that you are not actually swiping to delete when scrolling through your inbox.

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">The talk about animations by <a href="https://twitter.com/alex_holachek?ref_src=twsrc%5Etfw">@alex_holachek</a> was absolutely stunning. Must watch. Demo repository: <a href="https://t.co/h1tc0RAKa7">https://t.co/h1tc0RAKa7</a></p>&mdash; Dan Abramov (@dan_abramov) <a href="https://twitter.com/dan_abramov/status/1187805350944227328?ref_src=twsrc%5Etfw">October 25, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## Luca Damasco &mdash; Creating Games, Animations, and Interactions with Wick Editor

Wick Editor is an open-source tool that allows you to create things like games and animations. It's a two-person team and they have been working on it for about four years now!

Luca showed us some amazing animations that can be made with Wick Editor! He showed us this cat animation thing where the cat roams the hills, runs into trees, and the user is meant to try and catch the cat.

Developers of all ages can work on Wick Editor! He shows a game that a child had created where you move a rabbit around to collect carrots and crowns!

## Overview

This was my first attendance to a React conference, and I must say, the community was an inviting, energetic, and very intelligent group of humans! The hallway track was valuable! Brand new developers were given opportunities to speak to the React core team, developers from Amazon, or even catch up with their developer heroes.

You can find the YouTube videos from [day one here](https://www.youtube.com/watch?v=UxoX2faIgDQ&t=11558s) and [day two here](https://www.youtube.com/watch?v=JDDxR1a15Yo&t=19919s). I have listed in order, the speakers so you may easily jump around the video to find your desired talked. But trust me, you'll wanna watch them all!

### Day 1

1. [Tom Occhino](https://twitter.com/tomocchino) & [Yuzhi Zheng](https://twitter.com/yuzhiz) &mdash; Keynote
2. [Frank Yan](https://twitter.com/frankyan) & [Ashley Watkins](https://twitter.com/catchingash) &mdash; Building the New Facebook with React and Relay
3. [Tania Papazafeiropoulou](https://twitter.com/_Tany_) &mdash; How Our Team is Using React Native to Save the World
4. [Tejas Kumar](https://twitter.com/TejasKumar_) &mdash; Using Hooks and Codegen to Bring the Benefits of GraphQL to REST APIs
5. [Sophie Alpert](https://twitter.com/sophiebits) &mdash; Building a Custom React Renderer
6. [Nat Alison](https://twitter.com/tesseralis) &mdash; Is React Translated Yet?
7. [Maja Wichrowska](https://twitter.com/majapw) & [Tae Kim](https://twitter.com/taekimjr) &mdash; Building (And Re-Building) the AirBnB Design System
8. [Brittany Feenstra](https://twitter.com/BrittanyIRL) &mdash; Accessibility Is a Marathon, Not a Spring
9. [Becca Bailey](https://twitter.com/beccaliz) &mdash; The State of React State in 2019
10. [Lee Byron](https://twitter.com/leeb) &mdash; Let's Program Like It's 1999

### Day 2 

1. [Brian Vaughn](https://twitter.com/brian_d_vaughn) &mdash; React Developer Tooling 
2. [Joe Savona](https://twitter.com/en_JS) &mdash; Data Fetching with Suspense in Relay
3. [Cameron Yick](https://twitter.com/hydrosquall) &mdash; Automatic Visualizations of the Frontend
4. [Jenn Creighton](https://twitter.com/gurlcode) &mdash; React is Fiction
5. [Alexandra Holacheck](https://twitter.com/alex_holachek) &mdash; Progressive Web Animations
6. [Luca Damasco](https://twitter.com/Lucapodular) &mdash; Creating Games, Animations, and Interactions with the Wick Editor: A UX Talk
7. [Jed Watson](https://twitter.com/JedWatson) &mdash; Building React-Select
8. [Lizzie Salita](https://twitter.com/ebsalita) &mdash; Promoting Transparency in Government Spending with React
9. [Alex Anderson](https://twitter.com/ralex1993) &mdash; Wonder-Drive Development: Using React to Make a Spaceship

<include src="asides/AboutAuth0" />

---


React Conf: An Energetic Reactive Community

Learn how to build client-server systems by applying the REST architecture principles.

REST Architecture - Part 2: Building the Client

Learn how to use Next.js to add navigation and routing to server-side rendered React applications.



In this tutorial series, you'll be provided with a practical introduction to how Next.js can help you build web applications. 

Created by [ZEIT, a cloud company for hosting frontends and serverless functions](https://zeit.co/), Next.js is a React framework capable of creating applications that run both on the client and the server, otherwise known as Universal JavaScript applications. This framework helps you build universal apps faster by streamlining basic features like client-side routing and page layout while simplifying advance features like server-side rendering and code splitting.

Part one of this Nextjs series shows developers [how to create pages and layouts](https://auth0.com/blog/next-js-practical-introduction-for-react-developers-part-1/). In the second part of the series, you learned [how to add styling and create themes](https://auth0.com/blog/next-js-practical-introduction-for-react-developers-part-2/). In this third part of the series, you'll learn how to navigate to pages and implement routing using [using Next.js 9](https://nextjs.org/blog/next-9), the most recent framework version at the time of writing. [Familiarity with the React library](https://auth0.com/blog/react-tutorial-building-and-securing-your-first-app/) is recommended.

## Setting Up the Project

If you are starting from this part, you can get the app that was built in the previous, second part by cloning the repo and checking out the `part-2` branch:

```bash
git clone git@github.com:auth0-blog/whatabyte-next-intro.git whatabyte
cd whatabyte
git checkout part-2
```

If you haven't [connected to GitHub using SSH](https://help.github.com/en/articles/connecting-to-github-with-ssh), please clone the repo with the HTTPS URL:

```bash
git clone https://github.com/auth0-blog/whatabyte-next-intro.git whatabyte
cd whatabyte
git checkout part-2
```

The repository is cloned into the directory called `whatabyte` on your local machine. If the directory doesn't exist, it is created.

With the branch checked out, proceed to install the project dependencies:

```bash
npm install
```

Finally, execute the following command in your terminal to run the app:

```bash
npm run dev
```

To see the app in action and start following the tutorial, visit [`http://localhost:3000`](http://localhost:3000) on your browser.

## Understanding Next.js Routing

The _WHATABYTE_ app has four core routes:

* `/explore`: To show trending restaurants and dishes
* `/nearme`: To show restaurants near the user
* `/mycart`: To show the orders of the user
* `/profile`: To show the user information such as name, address, and billing data

From these four core routes, the `/explore` route will be the main route. Thus, the root path, `/`, should redirect to `/explore`.

First, to get familiar with navigation in Next.js, you'll navigate to the Explore page from the Index page by adding a hyperlink inside the content container of the Index page. You can do this easily by using the [Next.js `Link` component](https://nextjs.org/docs#with-link) inside `index.js` as follows:

```javascript
// pages/index.js
import Link from "next/link";

import Layout from "../components/Layout";

const Index = () => (
  <Layout>
    <br />
    <Link href="/explore">
      <a> Welcome to WHATABYTE! Start Exploring Now</a>
    </Link>
  </Layout>
);

export default Index;
```

The Next.js `Link` component takes a route or navigation path as the value of its `href` property. You can embed any other component within `Link` as long as that component can take an `href` prop.

After the view updates in the browser, visit [`http://localhost:3000/`](http://localhost:3000/) and click on the link. It will take you to the Explore page.

![Next.js app using the Link component](https://images.ctfassets.net/23aumh6u8s0i/p60hqwOc0JhYZ0QZfr89b/9450c893ce78d695ecd3d01ad20313bd/nextjs-practical-introduction_nextjs-app-using-link-component)

Using this link to navigate to another page is good for testing but what the app needs is navigation through the `NavBar` component. To do so, you'd need a `NavButton` component to make the creation of four navigation buttons standard and easy to maintain. 

To make the buttons look nice, you'll use the [FontAwesome icons](https://fontawesome.com/icons?d=gallery). Using another console window or tab, install the following packages:

```bash
npm i @fortawesome/fontawesome-svg-core \
  @fortawesome/free-solid-svg-icons \
  @fortawesome/react-fontawesome
```

* Windows PowerShell:

```bash
npm i @fortawesome/fontawesome-svg-core `
  @fortawesome/free-solid-svg-icons `
  @fortawesome/react-fontawesome
```

Creating the navigation bar dynamically would be much easier if you can encapsulate all of its configuration in a file. Under the `whatabyte` directory, create a `config` subdirectory:

```bash
mkdir config
```

Within that new subdirectory, create a `buttons.js` file within it:

```bash
touch config/buttons.js
```

* Windows PowerShell:

```bash
ni config/buttons.js
```

Then, populate `buttons.js` as follows:

```javascript
// config/buttons.js

import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
  faCompass,
  faMapMarkerAlt,
  faUser,
  faShoppingCart
} from "@fortawesome/free-solid-svg-icons";

const navButtons = [
  {
    label: "Explore",
    path: "/explore",
    icon: <FontAwesomeIcon icon={faCompass} />
  },
  {
    label: "Near Me",
    path: "/nearme",
    icon: <FontAwesomeIcon icon={faMapMarkerAlt} />
  },
  {
    label: "My Cart",
    path: "/mycart",
    icon: <FontAwesomeIcon icon={faShoppingCart} />
  },
  {
    label: "Profile",
    path: "/profile",
    icon: <FontAwesomeIcon icon={faUser} />
  }
];

export default navButtons;
```

Then, under the `components` directory, create a `NavButton.js` file that exports the `NavButton` component:

```bash
touch components/NavButton.js
```

* Windows PowerShell:

```bash
ni components/NavButton.js
```

Then, populate `NavButton.js` with the following:

```javascript
// components/NavButton.js

import Link from "next/link";

import "./NavButton.scss";

const NavButton = props => (
  <Link href={props.path}>
    <div className="NavButton">
      <div className="Icon">{props.icon}</div>
      <span className="Label">{props.label}</span>
    </div>
  </Link>
);

export default NavButton;
```

The `NavButton` needs its proper styling. Create `NavButton.scss` as a sibling file:

```bash
touch components/NavButton.scss
```

* Windows PowerShell:

```bash
ni components/NavButton.scss
```

Then, populate `NavButton.scss` with the following [style rules](https://sass-lang.com/documentation/style-rules):

```scss
// components/NavButton.scss

.NavButton {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;

  height: 100%;

  cursor: pointer;

  .Icon {
    font-size: 20px;
  }

  .Label {
    font-size: 12px;
    text-transform: capitalize;
  }
}
```

Import the button configuration file in the `Layout` component and pass its data as the `navButtons` props to the `NavBar` component:

```javascript
// components/Layout.js
import Head from "next/head";

import Header from "./Header";
import NavBar from "./NavBar";

import "./Layout.scss";
import "./index.scss";

import navButtons from "../config/buttons";

const Layout = props => {
  const appTitle = `> WHATABYTE`;

  return (
    <div className="Layout">
      <Head>
        <title>WHATABYTE</title>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta charSet="utf-8" />
      </Head>

      <Header appTitle={appTitle} />
      <div className="Content">{props.children}</div>
      <NavBar navButtons={navButtons} />
    </div>
  );
};

export default Layout;
```

It's better for the `Layout` component to be the one responsible for passing the button configuration to the `NavBar` component as it is in charge of enforcing a consistent structure for each page of the application. If you wanted to keep `Layout` as a presentational component, then you could wrap it into a container component that passes it the button configuration data.

To render the buttons within the `NavBar` component, update the content of the `NavBar.js` file as follows:

```javascript
// components/NavBar.js

import "./NavBar.scss";
import NavButton from "./NavButton";

const NavBar = props => (
  <div className="NavBar">
    {props.navButtons.map(button => (
      <NavButton
        key={button.path}
        path={button.path}
        label={button.label}
        icon={button.icon}
      />
    ))}
  </div>
);

export default NavBar;
```

If your app is not running, execute `npm run dev` in the terminal. Otherwise, visit [`http://localhost:3000/`](http://localhost:3000/) directly and then click on the Profile button. You'll be taken to the Profile page. Try using the other navigation buttons. 

> If the labels and icons of the buttons look too big, refresh the page.

Did you notice a bit of delay when you navigated from page to page? If you look at the terminal window or tab where the server is running, you may see a message from Next.js explaining that the pages need to be compiled when you first load them, causing a small delay:

```bash
Note that pages will be compiled when you first load them.
```

The navigation bar becomes much more functional and expressive by having those buttons with icons and labels on them. However, adding a visual indicator of what view is active by looking at the navbar would further improve the user experience. You'll learn how to do that in the next section by applying the `.active` CSS class to `NavButton` components dynamically.

<include src="TweetQuote" quoteText="Learn how to add navigation and routing to Next.js apps."/>

## Using High-Order Components with Next.js

The Next.js `Link` component has two main props:

- `href` specifies a path inside the `pages` directory to use as a route.

- `as` is used to customize the path rendered in the browser URL bar. 

 
There's no "active" class prop that we can pass to it. To style it, you need to do so within its underlying components.

The Next.js router keeps track of the active page through a `router.pathname` property. To inject the `pathname` prop in your component, you can use the [`withRouter` higher-order component](https://nextjs.org/docs#using-a-higher-order-component). Using this prop with conditional styling will let you have a distinctive style for the active page button. 

Open `components/NavButton.js` and update its content to this:

```javascript
// components/NavButton.js

import Link from "next/link";
import { withRouter } from "next/router";

import "./NavButton.scss";

const NavButton = props => (
  <Link href={props.path}>
    <div
      className={`NavButton ${
        props.router.pathname === props.path ? "active" : ""
      }`}
    >
      <div className="Icon">{props.icon}</div>
      <span className="Label">{props.label}</span>
    </div>
  </Link>
);

export default withRouter(NavButton);
```

If the `path` prop matches the `router.pathname` prop, the `active` class is added to the `NavButton` class name. Save your changes and test the navigation buttons in the browser. Once you click on a button, its icon lights up into an orange-red-like color.

![Next.js nav bar with active view indicator](https://images.ctfassets.net/23aumh6u8s0i/7CGRo1E2kEu4n0r74at5x1/c43e0ae420ce84103ca404111249cc58/nextjs-practical-introduction_nextjs-nav-bar-with-active-view-indicator)

## Recap

In this part of the tutorial, you have learned how to use Next.js built-in components to navigate to pages within your app and to represent the state of the router through navigation UI elements. 

You've done a lot so far throughout this tutorial and there is a lot more than could be done using Next.js! The last part of this practical introduction to Next.js will teach you how to create a login page and add user authentication to your app using Passport.js and Auth0.

Again, you can reference [Part 2 for adding styling and creating themes, here](https://auth0.com/blog/next-js-practical-introduction-for-react-developers-part-2/) and [Part 1 for creating pages and a page layout](https://auth0.com/blog/next-js-practical-introduction-for-react-developers-part-1/)

> Can't wait to learn about Next.js authentication? Feel free to read Bruno's [Next.js Authentication Tutorial](https://auth0.com/blog/next-js-authentication-tutorial/).

<include src="asides/AboutAuth0" />


Next.js Practical Introduction: Navigation and Routing

Learn how to handle styling and theming while using Next.js to build server-side rendered React applications.

Next.js Practical Introduction: Styling and Theming

Auth0 has a new SDK for securing single page applications with industry best practices.


We are excited to announce the release of our new JavaScript SDK for Single Page Applications (SPAs) called [auth0-spa-js](https://auth0.com/docs/libraries/auth0-spa-js).

## Why a New SDK?
The [`auth0.js`](https://github.com/auth0/auth0.js) library has been our default browser-based SDK for the last few years and has been a key part of our product and success. It has over 100K+ weekly downloads and is used by almost every Auth0 customer in one way or the other.

Over this time, we have developed a large set of capabilities in the core product. As the platform has moved forward, `auth0.js` has grown in size and capabilities. While `auth0.js` is an extremely powerful SDK that can handle a large number of different scenarios, this versatility comes at a price.

We went back to the drawing board and we re-imagined how a web platform SDK should work for the most common scenarios developers will be implementing. This new SDK:

- integrates with [Universal Login](https://auth0.com/docs/universal-login), our flagship login experience
- is much easier to integrate into Single Page Apps and requires less code
- abstracts the developer from standards and protocols
- frees the developer from having to specify the grant or other protocol details, manage token expiration and renewal, or store and cache tokens
- follows industry and service best practices and protects developers from security pitfalls
- weights around 7kb minified and gzipped

We're excited about these changes and hope our customers and [developer community](https://community.auth0.com/) find this new SDK easy to use yet still powerful and secure.

<include src="TweetQuote" quoteText=".@auth0 has a new SDK to keep SPAs secure called auth0-spa-js. Check it out!"/>

## When to Use `auth0-spa-js` (and When Not to)
The new SDK is designed for use in SPAs to keep them secured using industry best practices.

The OAuth2 working group has published a new general [best current practices document](https://tools.ietf.org/html/draft-ietf-oauth-security-topics-11) for using OAuth2 to invoke APIs from Single Page Applications. The recommendation is now to use the authorization code grant with Proof Key for Code Exchange (PKCE), as opposed to using the implicit grant as described in the original OAuth2 spec. You can find more details in [this blog post from our Principal Architect Vittorio Bertocci](https://auth0.com/blog/oauth2-implicit-grant-and-spa/).

This new JavaScript SDK implements the authorization code grant with PKCE for authentication, so by using this new library, you will be following the latest industry best practices when it comes to security in Single Page Applications.

Don't worry, we will not be discontinuing support of `auth0.js`. In fact, if you still use embedded login or need to call the [management API](https://auth0.com/docs/api/info#management-api-v2) or [authentication API](https://auth0.com/docs/api/info#authentication-api), you'll want to stick with `auth0.js`. We encourage you to switch to `auth0-spa-js` if you're using Universal Login in a SPA.

![Auth0's Lightweight Universal Login modal view](https://images.ctfassets.net/23aumh6u8s0i/54lZ5srDBAM0dqWSRkdxXk/f4260dcf2af6e7b5b4a52c62769e0745/lightweight-login)

## How to Use Auth0 SPA JS SDK
So how do you start using the new SDK? Here are some steps for vanilla JavaScript that can then be applied to the framework of your choice.

### Installation
To use the new SDK, first install it from npm:

```bash
npm install @auth0/auth0-spa-js
```

Alternatively, you can include it in your project using our CDN:

    
    <script src="https://cdn.auth0.com/js/auth0-spa-js/1.0/auth0-spa-js.production.js"></script>
     

### Create the client
Once `auth0-spa-js` is added to your project, you'll need to create an instance of the Auth0 client in your application. Ideally, you should have only one instance of the client. Do this before rendering or initializing your application.

You can do this using async/await:

```javascript
//with async/await
const auth0 = await createAuth0Client({
  domain: '<AUTH0_DOMAIN>',
  client_id: '<AUTH0_CLIENT_ID>'
});
```

Or with promises:

```javascript
//with promises
createAuth0Client({
  domain: '<AUTH0_DOMAIN>',
  client_id: '<AUTH0_CLIENT_ID>'
}).then(auth0 => {
  //...
});
```

### Logging in
Adding the ability to log in to your application is easy. Given the following button:

    
    <button id="login">Click to Log In</button>
    

You can add a click handler and then call the [`loginWithRedirect()`](https://auth0.github.io/auth0-spa-js/classes/auth0client.html#loginwithredirect) method:

```javascript
document.getElementById('login').addEventListener('click', () => {
  return auth0.loginWithRedirect();
});
```

Once the user is redirected back to the app after authenticating with Auth0, your app will need to call [`handleRedirectCallback()`](https://auth0.github.io/auth0-spa-js/classes/auth0client.html#handleredirectcallback): 

```javascript
await auth0.handleRedirectCallback();
```

This is what parses the result from Auth0, stores the tokens, and sets up the session. You'll then be able to get the user or token as needed:

```javascript
const user = await auth0.getUser();
const token = await auth0.getTokenSilently();
```

### Calling an API
You can also use the SDK to silently get a token and then use that token in a call to an API.

Given the following button:

    
    <button id="call-api">Call an API</button>
    

You'll add a click handler, call [`getTokenSilently()`](https://auth0.github.io/auth0-spa-js/classes/auth0client.html#gettokensilently), and then use the returned token in your API call.

Here it is with async/await:

```javascript
//with async/await
document.getElementById('call-api').addEventListener('click', async () => {
  const accessToken = await auth0.getTokenSilently();
  const result = await fetch('https://myapi.com', {
    method: 'GET',
    headers: {
      Authorization: `Bearer ${accessToken}`
    }
  });
  const data = await result.json();
  console.log(data);
});
```

And with promises:

```javascript
//with promises
document.getElementById('call-api').addEventListener('click', () => {
  auth0
    .getTokenSilently()
    .then(accessToken =>
      fetch('https://myapi.com', {
        method: 'GET',
        headers: {
          Authorization: `Bearer ${accessToken}`
        }
      })
    )
    .then(result => result.json())
    .then(data => {
      console.log(data);
    });
});
```

If there's a valid token stored, `getTokenSilently` will return it. Otherwise, it opens an iframe with the `/authorize` URL using the parameters provided as arguments and returns the token.

### Logging out
Finally, logging out of your application is a matter of adding an event handler to your log out button and then calling Auth0's [`logout()`](https://auth0.github.io/auth0-spa-js/classes/auth0client.html#logout) method.

Here's the button:

    
    <button id="logout">Log Out</button>
    

And here is the click handler and the call to `logout()`:

```javascript
document.getElementById('logout').addEventListener('click', () => {
  auth0.logout();
});
```

## Behind the Curtain
Since many developers (myself included) are wary of black boxes, let's take a moment to look at the protocols behind the new SDK.

While our intent is to abstract away all the implementation details in this new SDK so you don't need to worry about them, identity geeks will be pleased to know that `auth0-spa-js` is compliant with OAuth 2.0 specifications:

* `loginWithRedirect` uses [authorization code with PKCE](https://tools.ietf.org/html/rfc7636)
* `loginWithPopup` uses authorization code with PKCE + [`web_message`](https://tools.ietf.org/html/draft-sakimura-oauth-wmrm-00)
* `getTokenSilently` uses authorization code with PKCE + `web_message`

Auth0 takes our commitment to security best practices seriously. Luckily, we do all the heavy lifting so you don't have to!

## Where to Go Next
To learn more about using `auth0-spa-js`, check out the Auth0 Single Page Applications [SDK introduction documentation](https://auth0.com/docs/libraries/auth0-spa-js), [repository](https://github.com/auth0/auth0-spa-js), and [the SDK's full documentation](https://auth0.github.io/auth0-spa-js/index.html). There are also [Quickstarts](https://auth0.com/docs/quickstarts) that will walk you through integration step-by-step for popular front-end frameworks like React and Angular. We hope you're as excited about this new SDK as we are, and look forward to hearing feedback from the [developer community](https://community.auth0.com/)!

<include src="asides/AboutAuth0" />



Announcing the General Availability of the Auth0 SPA JS SDK

hasura:praveen

Praveen Durairaj

Learn how to build a working real-time backend for a to-do app using Hasura and GraphQL

Build a Collaborative Realtime Todo App Backend Using Hasura GraphQL

bruno-krebs

I am passionate about developing highly scalable, resilient applications. I love everything from the database, to microservices (Kubernetes, Docker, etc), to the frontend. I find amazing to think about how all pieces work together to provide a fast and pleasurable experience to end users, mainly because they have no clue how complex that "simple" app is.

R&D Content Architect

Bruno Krebs

Learn how to scaffold a React Single-Page Application with some sensible and opinionated defaults.

Beyond Create React App: React Router, Redux Saga, and More

Learn what's new with React Hooks. For example, use state in a functional component.



**TL;DR:** - In this article, we are going to go over React Hooks. This new feature is currently in the React 16.8 stage. With React Hooks, we will be able to write functional components that have a state; no need to use a class component for state anymore!

## React Hooks

[React](https://reactjs.org/) is constantly giving us cool new updates. Currently, in React 16.8, we have [React Hooks](https://reactjs.org/blog/2019/02/06/react-v16.8.0.html)! What if I told you Hooks got rid of the major need for class components? This new feature may make your code more concise. Don’t we all want that?

But what is all the fuss with React Hooks? Why should I stop using class components? By all means, no need to stop using them. There is no plan to get rid of class components and if the developer wants to, the transition to switch to React Hooks is going to be seamless.

<include src="TweetQuote" quoteText="React Hooks can make code more concise and gets rid of the need to use class components for state."/>

## What Is a "Hook"?

React Hooks are a way to "hook" into a functional component. Functional components have never been able to hold a `state`, but with Hooks, it gives them the power to do so now.

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Learn all about Hooks from our keynote (me and <a href="https://twitter.com/sophiebits?ref_src=twsrc%5Etfw">@sophiebits</a>) and a deep dive by <a href="https://twitter.com/ryanflorence?ref_src=twsrc%5Etfw">@ryanflorence</a>! <a href="https://t.co/bGk9ajVtgi">https://t.co/bGk9ajVtgi</a></p>&mdash; Dan Abramov (@dan_abramov) <a href="https://twitter.com/dan_abramov/status/1055863985298423808?ref_src=twsrc%5Etfw">October 26, 2018</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

If we were to head over to [React docs on Hooks](https://reactjs.org/docs/hooks-intro.html), they said it best with:

> Hooks are an upcoming feature that lets you use state and other React features without writing a class. [Source](https://reactjs.org/docs/hooks-intro.html)

`State` is written in a much cleaner way and setting or updating that `state` can be declared in as little as one line. 

Then you have [lifecycle methods](https://reactjs.org/docs/state-and-lifecycle.html#adding-lifecycle-methods-to-a-class) like `componentDidMount` or `componentDidUpdate` that will be taken care of by [`useEffect`](https://reactjs.org/docs/hooks-effect.html). Hooks are powerful, and it allows for functional components to harness that power.

<include src="TweetQuote" quoteText="React Hooks are a way to 'hook' into a functional component."/>

## Using React Hooks in Projects

Now that we have a basic understanding of what React Hooks are, are we ready to use it in our projects? To get the current version of React into your project and start using React Hooks, simply run this command in your IDE:

```bash
npm install -S react@16.8 react-dom@16.8
```

## What State Looks Like Currently

In a class component, we are able to declare [`state`](https://reactjs.org/docs/state-and-lifecycle.html#adding-local-state-to-a-class) and set that state with [`setState`](https://reactjs.org/docs/state-and-lifecycle.html#using-state-correctly) We are familiar with it looking something like this:

```javascript
// 24 lines of code

import React from "react";
import ReactDOM from "react-dom";

class ClassExample extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      phrase: "My Favorite Color Is "
    };
  }

  render() {
    return (
      <div>
        <p>{this.state.phrase}</p>
        <button onClick={() => this.setState({ phrase: this.state.phrase + "Blue" })}>
          Reveal the Color!
        </button>
      </div>
    );
  }
}

ReactDOM.render(<ClassExample />, document.getElementById("root"));
```

[The CodeSandbox for the above code can be found here.](https://codesandbox.io/s/k5jl7v0wrv)

In this example, we are declaring our `state` to be the phrase, `"My Favorite Color Is "`. We then create a button that when clicked, activates the `setState` and adds on the string, "Blue" to the phrase.

The output of this component would look like this:

![The output of a class component using state and setState](https://images.ctfassets.net/23aumh6u8s0i/6otb0DYExnm9O5T9OMQMj4/8765d9b3205cc937f857db0e71ca89f8/class-component)

And once the button is clicked, we should see this:

![The output of a class component when the button is clicked and setState is used](https://images.ctfassets.net/23aumh6u8s0i/20NvLYOlSlPaFXoGMN27GL/143462f87fd376754530414ed3ff1461/class-component-setState)

## What State Can Look Like With React Hooks

If we took that same logic from the class component, put it into a functional component, and used React Hooks instead, we could cut out a lot of lines of code. Let’s see how that would look like.

```javascript
// 17 lines of code

import React, { useState } from "react";
import ReactDOM from "react-dom";

function HooksExample() {
  const [phrase, setPhrase] = useState("My Favorite Color Is ");

  return (
    <div>
      <p>{phrase}</p>
      <button onClick={() => setPhrase(phrase + "Blue")}>
        Reveal the Color!
      </button>
    </div>
  );
}

ReactDOM.render(<HooksExample />, document.getElementById("root"));
```

[The CodeSandbox for the above code can be found here.](https://codesandbox.io/s/3x54vv31rq)

We see here that `state` looks different, much different. Besides the keyword `useState`, we don’t even see `state` being used at all.

In this line:

```javascript
const [phrase, setPhrase] = useState("My Favorite Color Is ");
```

This is where our state is being set. The two values, `phrase` and `setPhrase` are placeholders. We also see a new feature, `useState`.

1. `phrase` is equal to `this.state`.
2. `setPhrase` is equal to  `this.setState`.
3. `useState` is going to be our initial state value.

By using `setPhrase` within the React element being rendered, we are able to set a new state value and reveal the favorite color after the button is clicked.

The difference in the number of lines between these two examples is seven lines, but that can grow so much depending on your component. But the big difference is that we now can declare our state in a single line! We are able to replace our class constructor for a single function call.

By looking at `useState` a little more, this is the Hook that allows for the us to add in state to our functional component. You can read more about that in the [React docs here!](https://reactjs.org/docs/hooks-state.html#whats-a-hook)

Also, notice that in the Hooks example, it was a functional component. Using `state` in a functional component, who would have thought!

## Why the Square Brackets?

This is using the JavaScript syntax, ["array destructuring"](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment). Array destructing is when we are able to "unpack" values from an array and assign them to variables.

We are able to give the variables our own names, like `phrase` and `setPhrase` and then the `useState` knows that those two values are what it's going to be using. Once setting those two variables, the `useState` will be able to map over the values and know that the first value has the name of `phrase` and the second value has a name of `setPhrase`.

```javascript
const [firstvalue, secondvalue] = useState(0);
```

## Multiple State Hooks

Want to use more than just one state hook in a component? React allows for [multiple state hooks](https://reactjs.org/docs/hooks-state.html#tip-using-multiple-state-variables) in one component:

```javascript
function LotsOfStates() {
  const [name, setName] = useState("Sarah");
  const [color, setColor] = useState("Blue");
  const [shopping, setList] = useState([{ item: "Almond Milk" }]);
```

We are able to give different names to particular `states`, that way things are kept organized. Rather than using the word, `state`, we give it a name like, `color` or `shopping` so we know exactly which one we are working with.

## The Effect Hook

Another neat feature of React Hooks is the use of [`useEffect`](https://reactjs.org/docs/hooks-effect.html). This will handle the lifecycle methods that we would want to use in our React code. The following code is based on an example presented in the React docs:

```javascript
import { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
```
[Source](https://reactjs.org/docs/hooks-effect.html)

The `useEffect` hook replaces the following lifecycle methods: 

1. `componentDidMount` 
2. `componentDidUpdate`
3. `componentWillUnMount`

In a sense, it combines the power of these three, and makes one mega lifecycle method! 

The Effect Hook tells the component what we would like it to do at a certain time. After render, it will take care of any logic within the `useEffect` function. It could be something like the React docs example above or even to fetch data from an API.

<include src="asides/AboutAuth0" />

## Conclusion

In conclusion, when using React Hooks, be sure to follow the [docs](https://reactjs.org/blog/2019/02/06/react-v16.8.0.html)

Class components are not going anywhere. Although, now we have this awesome, more concise way to write state in function components, rather than going between class and function.

Thanks for reading! 


Overview of React Hooks

abdulazeez

I'm a software developer using JavaScript to implement every instance of life into software.

Software Developer and Student

Abdulazeez Adeshina

Learn how to develop a beautiful splash screen for your React apps so your users don't get a frozen screen.



**TL;DR:** In this article, you will learn how to develop a beautiful splash screen for your React apps. This screen will help users understand that your app is loading important data and that it is not stuck. If you need, you can check [the final code developed throughout this article in the `splash-screen` branch of this GitHub repository](https://github.com/auth0-blog/react-splash-screen/tree/splash-screen).

---

## Prerequisites

To follow this article along, you are expected to have some prior knowledge around JavaScript and React. If you don't have previous experience with React, you can [check out this article to learn, from scratch, how to build and secure React apps](https://auth0.com/blog/react-tutorial-building-and-securing-your-first-app/).

Besides this knowledge, you are expected to have both NPM and Node.js installed in your machine. If you don't have them, please, [check out this page to install both](https://nodejs.org/en/download/).

<include src="TweetQuote" quoteText="Learn how to take advantage of high-order components to create a nice splash screen for your React apps."/>

## Splash Screens

As defined on Wikipedia, [a splash screen is a graphical control element consisting of a window containing an image, a logo, and the current version of the software, and it usually appears while a game or program is launching](https://en.wikipedia.org/wiki/Splash_screen). The main goal of a splash screen is to make your users aware that the program is in a state where it is loading important data before they can start using the program.

You may wonder, "do I need a splash screen in my React app?" The answer, like always, is "it depends." If your React app doesn't need more than a few milliseconds to be ready, then you probably don't need a splash screen. However, there are times where your app needs to load some data or work on some process that is so important that it doesn't really make sense to show anything before it finishes. In these cases, your app (and mainly your users) might benefit from a nice splash screen.

In this article, you will clone a React app from GitHub that faces this exact scenario. In order to be useful, the React app that you will clone needs to create/check sessions into two different providers: Firebase and Auth0. Firebase provides, among other things, a real-time database that might require an authenticated user before accepting requests (that's the case of the React app that you will work on). Auth0, which is an identity service, enables users to authenticate into your apps and might need half a second to check for user sessions.

As you can see, in this React app, both services need some time to initialize a session before enabling users to go on. This situation, by itself, would already be a good scenario to implement a splash screen in a React app. However, what makes it even a better scenario for splash screens is the fact that Firebase can only initialize a session after Auth0 finishes initializing its own. [This is so because Firebase uses Auth0 users to authenticate](https://auth0.com/blog/developing-real-time-apps-with-firebase-and-firestore/). So, there is no way to initialize both in parallel.

### Splash Screens on React Apps

The best way to develop a splash screen for your React app is to define it as a [High-Order Component (HOC)](https://reactjs.org/docs/higher-order-components.html). If you don't know what a HOC is or how to use it, don't worry. As you will see while developing your splash screen, the approach and the concept are quite simple. However, you might benefit from the official definition of HOCs:

> A higher-order component (HOC) is an advanced technique in React for reusing component logic. HOCs are not part of the React API, per se. They are a pattern that emerges from React’s compositional nature. Concretely, a higher-order component is a function that takes a component and returns a new component.—[React](https://reactjs.org/docs/higher-order-components.html).

That is, a HOC is nothing more than a function that gets another component as a parameter and that, depending on the situation, generates a new component with different capabilities. In this case, you will create a HOC that will get a component (your whole app) and that will return a splash screen while the app is loading the desired state. Then, when the app finishes loading this state, your component will allow it to render and it will hide the splash screen.

## Developing a Splash Screen for Your React Apps

Now that you know why you might need a splash screen in your React apps and that you know (conceptually) how you would implement it, it is time to see the whole concept in action. So, as mentioned before, you will start by cloning a pre-existing React app that suffers from a not-that-fast loading time. To do so, open a terminal, move into the directory where you usually save your projects, and execute the following commands:

```bash
# clone the sample
git clone https://github.com/auth0-blog/react-splash-screen

# move into the cloned app
cd react-splashscreen

# install all dependencies
npm install

# run the application
export REACT_APP_AUTH0_DOMAIN=blog-samples.auth0.com
export REACT_APP_AUTH0_CLIENT_ID=6QfrEoazULfAssc0NqqGhfKkb7mumsCJ
export REACT_APP_AUTH0_REDIRECT_URI=http://localhost:3000
npm start
```

> **Note:** The `export` commands above create environment variables with details of a demo Auth0 account. If you do have your own account, [you can create a SPA in your Auth0 dashboard and replace the environment variables above with your its details](https://auth0.com/docs/quickstart/spa/react/01-login#get-your-application-keys).

The last command will make your app run and will open it on your default web browser (i.e., it will open [`http://localhost:3000`](http://localhost:3000) in your browser).

![Basic React app without a splash screen.](https://images.ctfassets.net/23aumh6u8s0i/4h7ejaItmktsbWOqSRifwf/ac9967c2208a99a7dd5accd2410a9484/react-app)

Now, as you can see, in the beginning, the app provides nothing else than a _log in_ button. If you click on this button, the app will redirect you to the Auth0 Login Page where you will be able to authenticate yourself. After authenticating, Auth0 will redirect you back to your app (i.e., to `http://localhost:3000`) where you will face the following behavior: at the very moment that you arrive at the app, you will see the same exact screen as you saw before logging in (with the _log in_ button). Then, after a second or two, you will notice that the screen "blinks" (gets updated) and that now it shows your name, a _log out_ button, and a list of books.

![Basic React app after authentication.](https://images.ctfassets.net/23aumh6u8s0i/7zKBJf4WX1mszQCAahCrLg/85d0f79ed89c80e4be7bf6e015df02f3/react-app-with-a-logged-in-user)

While your app was loading your session and loading the list of books, it was showing a wrong state. By looking at the app for a second, you and your users might feel that you are not actually logged in, and that something went wrong. To solve this problem, you will add a splash screen in your app that will correctly inform your users that the app is loading.

### Adding the Splash Screen Component

With your app up and running, the next thing you will do is to create a new file called `withSplashScreen.js` under the `./src/components` directory. Notice that this component's name, unlike others, start with a `with` prefix. This is a common pattern among React developers. Every time you are building a HOC, starting its name with `with` is a good practice.

So, after creating this file, you will insert the following code into it:

```js
import React, {Component} from 'react';
import auth0Client from '../Auth';
import './splash-screen.css';

function LoadingMessage() {
  return (
    <div className="splash-screen">
      Wait a moment while we load your app.
      <div className="loading-dot">.</div>
    </div>
  );
}

function withSplashScreen(WrappedComponent) {
  return class extends Component {
    constructor(props) {
      super(props);
      this.state = {
        loading: true,
      };
    }

    async componentDidMount() {
      try {
        await auth0Client.loadSession();
        setTimeout(() => {
          this.setState({
            loading: false,
          });
        }, 1500)
      } catch (err) {
        console.log(err);
        this.setState({
          loading: false,
        });
      }
    }

    render() {
      // while checking user session, show "loading" message
      if (this.state.loading) return LoadingMessage();

      // otherwise, show the desired route
      return <WrappedComponent {...this.props} />;
    }
  };
}

export default withSplashScreen;
```

As you can see, this file defines two functions:

- `LoadingMessage`: This is the component that the HOC will show while it is loading everything needed to make your React app run.
- `withSplashScreen`: This is the high-order component itself.

This HOC gets a parameter called `WrappedComponent` so it can know what the app is trying to render. Then, when the HOC mounts on the screen (i.e., when React calls the `componentDidMount` method), this component triggers a call to `auth0Client.loadSession` to load the user session (if any) from Auth0. If the component manages to load a session from Auth0, this function triggers a call to `setTimeout` with a 1.5 seconds delay (`setTimeout(() => {...}, 1500)`).

> **Note:** This timeout is actually representing what would happen in the real-world application. That is, this timeout is replacing the call to a Firebase SDK so you don't have to set up a Firebase account by yourself and we don't have to share ours publicly. If you want [to learn how to use Firebase and Auth0 together to create real-time web apps, check out this article](https://auth0.com/blog/developing-real-time-apps-with-firebase-and-firestore/).

During this delay, the `withSplashScreen` HOC will replace the component that the app wants to render (i.e., the `WrappedComponent`) by the `LoadingMessage` component. After the app finishes loading what is needed, the HOC component will change the value of the `loading` state (`loading: false`) causing a re-render that will result on the app rendering the `WrappedComponent` instead of the loading message.

One important characteristic about the `componentDidMount` function is that, if the user has no session at Auth0, the call to `auth0Client.loadSession` will fail almost instantaneously and the splash screen will go away fast.

Now, if you take a closer look at the current version of the `App.js` file, you will see that this component contains a similar function called `componentDidMount`. What you are doing is to actually move away from the `loadSession` process from the `App.js` file to the new `withSplashScreen` component. As such, you will have to remove this method, which will make your `App.js` file look like this:

```js
import React, {Component, Fragment} from 'react';
import {Route} from 'react-router-dom'
import NavBar from './components/NavBar';
import Welcome from './components/Welcome';

class App extends Component {
  render() {
    return (
      <Fragment>
        <NavBar />
        <div className="container-fluid">
          <Route path="/" exact component={Welcome} />
        </div>
      </Fragment>
    );
  }
}

export default App;
```

However, you haven't made use of the `withSplashScreen` HOC yet. To do so, you will update this same file one more time:

```js
// ... other import statements ...
import withSplashScreen from './components/withSplashScreen';

// ... App class definition ...

// replace the last line so you pass App as a parameter to withSplashScreen
export default withSplashScreen(App);
```

> **Note**: Calling `withSplashScreen(App)` makes the `WrappedComponent` parameter of the `withSplashScreen` component point to `App`. As such, after finishing its job, the splash screen will end up rendering your `App` component.

With that in place, you are almost done. The last thing you will need to do is to create some CSS rules to make your splash screen look nice. If you take a look back into the `withSplashScreen.js` file, you will notice that there is an `import` statement there that tries to load a file called `splash-screen.css` from the same directory. As such, you will create this file now and add the following CSS rules to it:

```css
.splash-screen {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.splash-screen .loading-dot {
  font-size: 100px;
  margin-top: -80px;
  position: relative;
  animation: ease-in-out infinite alternate;
  animation-name: run;
  animation-duration: 1.2s;
}

@keyframes run {
  0% {
    left: -90px;
    color: #eee;
  }
  50% {
    color: #666;
  }
  100% {
    left: 90px;
    color: #eee;
  }
}
```

That's it! You just finished creating a nice splash screen HOC to attach to your React app. To see it in action, you can simply reload your browser and, if you already logged in before, you will see the splash screen for 1.5 seconds or so (i.e., for the duration of the `auth0Client.loadSession()` call plus the `1500` milliseconds passed to `setTimeout`).

![React app showing a splash screen to improve user experience.](https://images.ctfassets.net/23aumh6u8s0i/3Vpmz9tPAaiPRyDYzzNeMF/d8872fa526dc4e0b96cb3c0372acba6b/splash-screen-showing-loading-message)

Cool, isn't it?

<include src="TweetQuote" quoteText="I just learned how to create a nice splash screen for my React apps."/>

<include src="asides/JavascriptAtAuth0" />

## Conclusion

Throughout this short article, you learned how to make use of High-Order Component to add splash screens to your React apps. The approach is quite easy and you can apply the concept to any React app (or any component-based UI library for that matter). I hope you enjoyed the article and that you got valuable information from it. Happy hacking!
