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>.


Developer Advocate

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

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

Utilize the power of JAMstack and build a portfolio with Gatsby Cloud, Netlify, and DatoCMS.



<AmpContent>
<amp-youtube
    data-videoid="9t3kZ0rVDTw"
    layout="responsive"
    width="315" height="560">
</amp-youtube>

</AmpContent>

<NonAmpContent>

<iframe width="560" height="315" src="https://www.youtube.com/embed/9t3kZ0rVDTw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

</NonAmpContent>

**TL;DR:** In today's article, we are going to be building a [JAMstack](https://jamstack.org/) application using [Gatsby Cloud](https://www.gatsbyjs.com/cloud/) and [Netlify](https://www.netlify.com/). Using the power of these two, we will see just how easy it is to go from ground zero to a fully deployed website. We will also go over the idea of JAMstack and how it's changing the way we think of web development.

## The Art of JAMstack

The term JAMstack was first coined and created by Netlify. It's probably safe to say that most of us have used JAMstack in one way or another in our web development. Okay, but what is JAMstack? Let's chat about it.

Let's go over what the JAM in JAMstack means.

* J: JavaScript - Arguably one of the most popular coding languages in the world, it makes sense we are using it. Creating apps with [React](https://reactjs.org/), [Vue](https://vuejs.org/), or even just plain vanilla JavaScript, this helps build the stack and keeps our requests client-side.
* A: API's - This one is cool because it utilizes the power of an API and takes away the need for a database or a backend that needs to host a server.
* M: Markup - Next, we can have templated markup that is prebuilt. Once we pull in a static site generator like [Jekyll](https://jekyllrb.com/) or [Gatsby](https://www.gatsbyjs.org/), we can get that content displayed quickly.

These three together make for some pretty fast load times. While these three are working hard to creating a fast website, we have so many resources out there. JAMstack takes JavaScript further than what we are used to in SPAs. JAMstack takes an extra step to generate a static version of the site, whereas SPAs are usually client-side rendered.

In today's project, we will be building a portfolio with Gatsby Cloud and Netlify. Let's go over those.

<include src="TweetQuote" quoteText="JAMstack is changing the way we think of web development!"/>

## What is Gatsby

In our project today, we are going to be using [Gatsby](https://www.gatsbyjs.org/). Gatsby is a React-based, static site generator that is powered by [GraphQL](https://graphql.org/). Being a static site generator means it takes our React applications and creates a static HTML file. Once we have that, then whatever JavaScript is needed is loaded on top of our site to add extra functionality. It takes the load off browsers as we are just serving HTML. We don't need to call any databases or to run any server code to generate our pages. We can utilize the power of JavaScript and API's to get our info.

Not only is it going to make things lightning-fast because HTML is faster for a browser to render than JavaScript, but it's also super easy to get started with. We will get into that in a bit when we start building our site.

### Gatsby Cloud

We will also be using [Gatsby Cloud](https://www.gatsbyjs.com/). Gatsby Cloud is a product provided by Gatsby that allows us to create and manage our Gatsby sites faster. Gatsby Cloud provides a few starter projects that we can use to connect Gatsby, a data source ([DatoCMS](https://www.datocms.com/) for this project), and a deployment tool (Netlify for this project). We can connect all of these things and have a site up in a few quick clicks.

We will talk more on DatoCMS in just a bit. We will also go over how to use this amazing new product, Gatsby Cloud, that Gatsby has given us.

<include src="TweetQuote" quoteText="Gatsby Cloud is a product provided by Gatsby that allows us to create and manage our Gatsby sites faster."/>

## What is Netlify

Before the days of [Netlify](https://www.netlify.com/), we had to use companies like [AWS](https://aws.amazon.com/) or [DigitalOcean](https://www.digitalocean.com/) to create a server and then host our website on that server. Today we have Netlify that takes care of that for us. Deploying a website to Netlify is almost too easy. (I was skeptical on my first deploy!)

There are many ways to get your website up and running. In today's project, we will be using Gatsby Cloud to connect to Netlify. Let's see just how easy it is to use Gatsby Cloud to deploy to Netlify!

## What is DatoCMS

Our content is going to live somewhere. Rather than building our own CMS (Content Management System), we are going to utilize a tool called [DatoCMS](https://www.datocms.com/). All of our content (portfolio items) will be managed there. This is great because we don't have to create our own dashboards or editors. All of this is taken care of for us in the DatoCMS built-in dashboard.

So let's say we have a blog, and we want just a single blog post to be updated. We can update that content, the data will live in DatoCMS, and when we deploy, it will rebuild that one item rather than the entire blog. Sounds time efficient!

Let's build!

## What We Will Build Today

In today's project, we are going to be building a portfolio! Using Gatsby Cloud, Netlify, DatoCMS, and the power of JAMstack, we will get a website built up in no time. Let's see how quickly a portfolio can be created in the JAMstack world!
    
## Starting Our Project

First things first, let's get a Gatsby site built. We are going to head over to [Gatsby Cloud](https://www.gatsbyjs.com/). Here we will see the homepage. Click on "Log in" and we will be redirected to a page with a button that says "Sign in with GitHub". Once we click on that, we are going to use our own GitHub credentials and log into the Gatsby Cloud.

> Note: We may need to authorize Gatsby Cloud at this point if we have never used it.

![Gatsby Cloud homepage](https://images.ctfassets.net/23aumh6u8s0i/1sMfmSEiTCLI7TjacXcfSi/2e04a961fd49786173a9cb84a30f7b7e/gatsby-cloud-2)

Next, we will want to create a new project. By clicking on the "Create new site +" button, we are going to start that process. We do not have a Gatsby site yet, so we are going to want to click on "I don't have a Gatsby site yet" and then hit, "Next".

![The step that shows "I don't have a Gatsby site yet"](https://images.ctfassets.net/23aumh6u8s0i/2tluYwoIs7wdZEIqAhnidn/321f50846c0539ae48c3c460262117c3/create-new-site-2)

Here we are going to see a four-step process to build our website.

### Four steps in the Gatsby Cloud

* Step #1 - Starter: From the starters list, we are going to use the "Portfolio with DatoCMS". Click on that starter and click "Next".

* Step #2 - Repository: Here, we will give our repository a name. Because of the link to our personal GitHub, Gatsby Cloud will create the repo for us and put it in our GitHub account. If our GitHub account has access to multiple GitHub organizations, we will need to choose the correct one that we want to use. Once the correct organization is selected, we will install Gatsby Cloud. Next, we will name it, and click "Next". In this tutorial, we will use `jamstack-portfolio`.

**Note**: Netlify requires that Site names are unique globally. If following along, a unique name must be used.

![Image of naming our project for GitHub repo name](https://images.ctfassets.net/23aumh6u8s0i/7EWzemqBqvkYHnneX1bqxu/b5ff59156048c5bc35680000fd9d7267/github-name-2)

* Step #3 - Connect CMS: In this step, we are going to either [create a DatoCMS account](https://dashboard.datocms.com/signup) or [connect to an existing one](https://dashboard.datocms.com/login). Click on the "Connect" button to be directed to "Authorize with DatoCMS". A popup will appear, and we will either create a new, free account with DatoCMS or log in to an existing one. Once we authorize all of that, we will return to see that we are indeed "Connected" to our DatoCMS. Once we see that, hit "Start my site".

![Image showing DatoCMS connection](https://images.ctfassets.net/23aumh6u8s0i/2q5pODvevF2RKIFIioXwA7/80af80dd8942531f3919b926a60fc6a5/datocms-connected-2)

* Step #4 - Summary: After just a moment, we will be redirected to the "Summary" tab. Here we have a bunch of information. We see that the set up was successful, we see the link to our DatoCMS project, and we also see our newly created GitHub link. Click on "Finish" to be redirected back to our [Gatsby Cloud dashboard](https://www.gatsbyjs.com/dashboard/sites).

Once on our dashboard, we will see that our newly created project is building. Give it a couple of minutes. Once it finishes, we should see a green checkmark and a "Deployed in (deploy time here)". 

> Note: To double-check that the repo was created, go to the GitHub account that was connected to Gatsby Cloud and go to "Repositories". There we will see our newly created repo!

### Quick recap!

So far, we have done the following:

1. We have created a GitHub repo that has all of our Gatsby code.
2. We have stored our data into DatoCMS, a headless CMS.
3. All of this is built as a static site via Gatsby Cloud.

This is a portfolio we are building, so we want to show off projects that we have built. Let's see how this is done!

## Updating Data in DatoCMS

All of our data lives in DatoCMS; let's go update it! We'll head on over to our [DatoCMS dashboard](https://dashboard.datocms.com/projects) and update an item.

![DatoCMS Dashboard view](https://images.ctfassets.net/23aumh6u8s0i/7Dxw3Q4Qk639dCLnOlwtDE/b2c7ea90b527b49ad104e737883b0775/datocms-dashboard-2)

Click on the project that we created earlier. In our case, we named it "jamstack-portfolio", so we should see that name in our list of projects. At the top of the page, we will see a button that says "Enter project", click on that.

Once we see the words, "Hello Admin!", we can update any of the data from there. 

Let's click on "Works". Here we are looking at the list of "Portfolio Items" that are viewed on our website. "Flyer 1", at the top of the list, happens to be one of the auto-generated items that we can go in and update. Let's go ahead and click on "Flyer 1", and we can update most everything on it. The title, the images, the content, anything! For this example, let's change the following:

* Title
* Cover Image
* Excerpt

It should look like this:

![Updating title, cover image, and excerpt in DatoCMS](https://images.ctfassets.net/23aumh6u8s0i/2JlsTnvqgWtGHmmRHGMYNU/2a464502f46937a8331da4e22eb5d235/editing-data-2)

Once we have updated all the things we want to, let's hit "Save" in the upper righthand corner of the page.

## Checking for Updates on Gatsby Cloud

Let's head on over to our [Gatsby Cloud dashboard](https://www.gatsbyjs.com/dashboard/sites), click on "jamstack-portfolio", and see how our site is doing. We are going to be double-checking that our changes were saved.

We should see our most recent deploy was run. If it's still running, make sure to let it finish deploying. There is a "Trigger build" button if needed, but we should not have to do that.

Once finished, click on the extremely long URL provided.

![Gatsby Cloud URL](https://images.ctfassets.net/23aumh6u8s0i/3EIgYLUq40xG6YmacWC4Ga/ad3908d16356d14431bf4fe353dda3d8/gatsby-url-2)

This URL shows a live version of our website! And we see that our content was updated in DatoCMS.

![Website homepage view](https://images.ctfassets.net/23aumh6u8s0i/4HICothDiKL3rp54ikmIDa/e72460f6ae47805f1914435a1356d8d3/previewing-site-2)
    
## Working on the Project Locally

Now that we have almost everything set up let's chat about adding other things to our website. If we wanted to do more than update the data we have set up through DatoCMS, we would clone the repo from GitHub, and open up our project in [VS Code](https://code.visualstudio.com/) or our editor of choice and do it there. Some of the things we could do are:

* Change the layout
* Change fonts or color
* Create a custom theme
* Create new types of pages
* Add in authentication
* Add more plug-ins for SEO purposes

We can find instructions in the `README.md` of the repo that was created for us. Once open in our editor of choice, run the following commands:

```bash
yarn install
```

> Be sure to have `yarn` installed. We can also use `npm` command instead.

We are going to want to create a `.env` file so we can store our token. This token is so we can get read-access from our DatoCMS project into Gatsby Cloud:

```bash
echo 'DATO_API_TOKEN=abc123' >> .env
```

To get that `DATO_API_TOKEN`, go to our [Gatsby Cloud dashboard](https://www.gatsbyjs.com/dashboard/sites), click into our project, and then click on "Site Settings". Once in there, click on "Environment variables" under "General" in the lefthand menu. There we will see "Build Environment variable" and a `DATO_API_TOKEN` that is starred out. If we click on "Edit" we will see the full token that we want in our `.env` file.

![Dato API Token view in Gatsby](https://images.ctfassets.net/23aumh6u8s0i/4kMwZW23Lt70AWu1Uj68yN/f5279cff29be6eef8a16367fb20a7315/dato-api-token-2)

To run the project locally in development mode, run the command:

```bash
yarn develop
```

To build the final static website, run the command:

```bash
yarn build
```

Again, all of this is in the `README.md` of our GitHub repo.

## Authentication with Auth0

Once inside VS Code or our editor of choice, we are going to be able to add authentication to our Gatsby site. There is an amazing blog post by [Sam Julien](https://auth0.com/blog/authors/sam-julien/) on [Securing Gatsby with Auth0](https://auth0.com/blog/securing-gatsby-with-auth0/).

This blog post will give you a step-by-step on how to secure a Gatsby site. We will need to <a href="https://auth0.com/signup" data-amp-replace="CLIENT_ID" data-amp-addparams="anonId=CLIENT_ID(cid-scope-cookie-fallback-name)">sign up for a free Auth0 account and we can do that here</a>. 

Auth0 will take care of the authentication process and give users a seamless experience.

## Deploy to Netlify

The URL that we were using earlier is extremely long and confusing; let's make it more readable. So to take care of that, let's deploy to Netlify.

Let's head back to our [project's dashboard in the Gatsby Cloud](https://www.gatsbyjs.com/dashboard/sites). Here we will see the URL that we clicked on earlier and above that is a banner that says, "Setup hosting". In that same banner, we see, "Do it now". Click on that.

We will see a list of different hosts that we can deploy to and we'll do the following steps:

1. Click on "Connect" that is next to Netlify. 
2. The "Netlify Integration" will appear, and we will want to click on "Connect". 
3. A Netlify login modal will popup, and we will want to log in here. 
4. We will then have to "Authorize" Gatsby Cloud for permission to our Netlify.
5. Our Netlify deployment site name will be auto-generated. We can change that if we want, but we'll just keep it that name for now. We will also want to select which Netlify team to add the site to. Then click on "Create":

![Create a new Netlify deployment site view](https://images.ctfassets.net/23aumh6u8s0i/354J3QxTRQ30re9eJGpHjz/8404ec39a4d838244259fdfb60e54140/deploy-netlify-2)

> Note: Remember that each Netlify Site name needs to be unique. Use the unique name that was used in your project.

Return to our [Gatsby Cloud dashboard](https://www.gatsbyjs.com/dashboard/sites) for the project and trigger a build. Once that is done, we can now visit our newly deployed website with our new URL, "unique-site-name.netlify.com.

![Final view of the deployed website homepage](https://images.ctfassets.net/23aumh6u8s0i/7bvVZtFySKmvBtjdnn0mS0/f79ca4059f9b350a4a42ebf5e324c234/deployed-site-2)

Yay!

<include src="asides/AboutAuth0" />

## Conclusion

Looking back, we can see the power of JAMstack, and how putting a couple of different resources together, it can create a dynamic site. By utilizing Gatsby Cloud, DatoCMS, and Netlify, we can create and deploy a website.

Feel free to make this your own and dive into the code and do custom styling or take that next step and authenticate the site. By having this foundation and understanding of JAMstack, we can create just about any website.

What is your favorite part of JAMstack? Which resources are your favorite? Let us know in the comments below!

---
