<commit_before>---
title: Making a site with user authentication
---

Sometimes, you need to create a site with gated content, available only to authenticated users. Using Gatsby, you may achieve this using the concept of [client-only routes](/docs/building-apps-with-gatsby/#client-only-routes), to define which pages a user can view only after logging in.

## Prerequisites

You should have already configured your environment to be able to use the `gatsby-cli`. A good starting point is the [main tutorial](/tutorial).

You'll also need to have `react-helmet` installed.
```shell
npm install --save react-helmet
```

## Security notice

In production, you should use a tested and robust solution to handle the authentication. [Auth0](https://www.auth0.com), [Firebase](https://firebase.google.com), and [Passport.js](http://passportjs.org) are good examples. This tutorial will only cover the authentication workflow, but you should take the security of your app as seriously as possible.

## Building your Gatsby app

Start by creating a new Gatsby project:

```shell
gatsby new gatsby-auth
cd gatsby-auth
```

Then, add a more apt title to your newly created site, changing the content of `gatsby-config.js`:

```javascript:title=gatsby-config.js
module.exports = {
  siteMetadata: {
    title: "Gatsby Authentication Tutorial",
  },
  plugins: ["gatsby-plugin-react-helmet", "gatsby-plugin-offline"],<commit_msg>chore: format (#10676)<commit_after>---
title: Making a site with user authentication
---

Sometimes, you need to create a site with gated content, available only to authenticated users. Using Gatsby, you may achieve this using the concept of [client-only routes](/docs/building-apps-with-gatsby/#client-only-routes), to define which pages a user can view only after logging in.

## Prerequisites

You should have already configured your environment to be able to use the `gatsby-cli`. A good starting point is the [main tutorial](/tutorial).

You'll also need to have `react-helmet` installed.

```shell
npm install --save react-helmet
```

## Security notice

In production, you should use a tested and robust solution to handle the authentication. [Auth0](https://www.auth0.com), [Firebase](https://firebase.google.com), and [Passport.js](http://passportjs.org) are good examples. This tutorial will only cover the authentication workflow, but you should take the security of your app as seriously as possible.

## Building your Gatsby app

Start by creating a new Gatsby project:

```shell
gatsby new gatsby-auth
cd gatsby-auth
```

Then, add a more apt title to your newly created site, changing the content of `gatsby-config.js`:

```javascript:title=gatsby-config.js
module.exports = {
  siteMetadata: {
    title: "Gatsby Authentication Tutorial",
  },
  plugins: ["gatsby-plugin-react-helmet", "gatsby-plugin-offline"],
{'fraction_non_alphanumeric': 0.10119465917076599, 'fraction_numerical': 0.003162333099086437, 'mean_word_length': 4.604330708661418, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 4, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5508498', 'n_tokens_mistral': 831, 'n_tokens_neox': 801, 'n_words': 339}