2/ Next + NextAuth + Strapi: setting up our project
Tags: nextauth, nextjs, strapi
Published: 2024-04-01 16:14:21

We need to do some installing and configuring before we can start. The endpoint of the setup code can be seen on [github (branch setup)](https://github.com/peterlidee/NNAS/tree/setup).

## 1. Next

Start by installing `Next` in a folder `frontend`. Run

```
npx create-next-app@latest
```

In the setup options, choose `TypeScript`, `src` folder, `app router` and `Tailwind`.

Once installed, we clean out most of the boilerplate so we can start with an empty project.

## 2. Strapi

Quick installation of `Strapi`. If you like like to read more about it, check out the `Strapi` [quickstart guide](https://docs.strapi.io/dev-docs/quick-start). Let's install `Strapi` in a folder `backend`:

```
npx create-strapi-app@latest backend --quickstart --ts
```

The `--quickstart` flag means that `Strapi` will setup a `SQLite` database for you. This is completely invisible and you don't ever have to worry about this database (in dev mode). The `--ts` adds `TypeScript` support.

I named my project backend and chose `Quickstart` as installation type.

Once the installation is complete, `Strapi` will automatically start running, open up `http://localhost:1337/admin/` and ask to create an account. This is the main `Strapi` administrator account so don't forget these credentials. It's all local so you don't have to worry.

And we are done with `Strapi` for now. We now have `Next` in our `frontend` folder and `Strapi` in our `backend` folder.

## 3. Setup an email provider in Strapi with nodemailer and Brevo

The default email plugin in `Strapi` is based on [Sendmail](https://www.npmjs.com/package/sendmail). This may work in a development environment but is not very reliably in production. (As the [`Strapi` docs](https://docs.strapi.io/dev-docs/plugins/email) themselves say.)

So, we are going to use a different plugin: [provider-email-nodemailer](https://www.npmjs.com/package/@strapi/provider-email-nodemailer) with an external provider ([Brevo](https://www.brevo.com/), used to be called SendinBlue). Note, there is a specific `Strapi` [plugin for Brevo](https://market.strapi.io/providers/strapi-provider-email-brevo). But using Nodemailer is an easier setup because we use SMTP.

Start by creating a **free** account (no credit card required) with [Brevo](https://www.brevo.com/). It allows for 300 free emails per day. This should be sufficient for dev purposes. Create a SMTP key. Then take the SMTP server, post, login and password and put them in the backend `.env` file:

```
# /backend/.env

SMTP_HOST=smtp-relay.brevo.com
SMTP_PORT=587
SMTP_USER=EDITME->someusername
SMTP_PASS=EDITME->somepassword
SMTP_DEFAULT_FROM=EDITME->someEmail
SMTP_DEFAULT_REPLYTO=EDITME->someEmail
```

The [email plugin](https://docs.strapi.io/dev-docs/plugins/email) allows you to send an email from inside `Strapi`, f.e. from inside a controller or service. To ensure that there is always a _from_ and _replyto_ value in these emails, we set defaults in the config (see below) and we declare them here as: `SMTP_DEFAULT_FROM` and `SMTP_DEFAULT_REPLYTO`.

Next, we are going to install the `Strapi` plugin [provider-email-nodemailer](https://www.npmjs.com/package/@strapi/provider-email-nodemailer). In the backend (`Strapi`) folder, run:

```
npm i @strapi/provider-email-nodemailer
```

Sadly there are some vulnerabilities:

```
17 vulnerabilities (3 moderate, 14 high)
```

But at 05/03/2024 the plugin was last updated 6 days ago. So, it should be fine.

Next, we need to active and configure this plugin. Add these settings:

```js
// backend/config/plugins.js

module.exports = ({ env }) => ({
  email: {
    config: {
      provider: 'nodemailer',
      providerOptions: {
        host: env('SMTP_HOST'),
        port: env('SMTP_PORT'),
        auth: {
          user: env('SMTP_USER'),
          pass: env('SMTP_PASS'),
        },
        // ... any custom nodemailer options
      },
      settings: {
        defaultFrom: env('SMTP_DEFAULT_FROM'),
        defaultReplyTo: env('SMTP_DEFAULT_REPLYTO'),
      },
    },
  },
});
```

Test if everything works. Start up strapi and go to the admin panel: <http://localhost:1337/admin>. Navigate to: `settings > email plugin > configuration`. Find the box `Test email delivery`, enter an email (you own) and hit send. This should send an email if you correctly followed the steps above.

Some tips if it failed:

- Make sure you added the env vars in the backend!
- Make sure you correctly spelled all vars in both .env and `config/plugins.js`.
- Read the error message in your backend terminal.

Source, most of the info in this section comes from this article: <https://antonioufano.com/articles/easily-send-emails-in-strapi-with-any-provider/>.

One last note: Brevo provides a nice dashboard with delivery stats and logs where you can review your sent mails.

## 4. Google OAuth

When you build a project that allows users to sign in with a Google account, you need to create an OAuth2.0 client on the Google cloud platform. This client will provide you with a client ID and a client secret that you will need later on when configuring `NextAuth`.

This [Youtube video](https://www.youtube.com/watch?v=A53T9_V8aFk&t=208s) walks you through the entire process. The relevant part is from 3:28 - 6:00. As a sidenote, this is a video from a Youtube Channel [Sakura Dev](https://www.youtube.com/@SakuraDev) that has a lot of information about NextAuth. So you may want to bookmark it.

Steps:

1. Go to <https://console.cloud.google.com/>
2. Create credentials OAuth client ID for a web application
3. Fill in a name (f.e. test project), origins (http://localhost:3000) and callback url (http://localhost:3000/api/auth/callback/google).
4. Take the client ID and secret and put them into a `.env.local` in the root of out `frontend` folder:

```
# .env.local

GOOGLE_CLIENT_ID=MYGOOGLECLIENTID
GOOGLE_CLIENT_SECRET=MYGOOGLECLIENTSECRET
```

Carefull, this is confidential information. Do not push this to a git repo! Also, don't worry if you don't know what the callback url is, this is just a setup. It will link your frontend `Next` to the Google provider.

## 5. Project structure

We now have 2 folders:

- `frontend` for `Next`
- `backend` for `Strapi`

I added a workspace file in each folder. This allows you to easily have 2 instances of `VS Code` open for each folder. I added a different background colors for each folder to easily know if you're in the front or backend and also hid the `node_modules` folder.

## 6. Some components and styling

Before we get started, we add a couple of components and set some basic styles. We are going to keep the styling as basic a possible as this is not a UX article.

In our root `layout.tsx` we added a `<NavBar />` component that - for now - holds a single link to the home page.

```tsx
export default async function NavBar() {
  return (
    <nav className='flex gap-4 items-center my-4 p-4 bg-zinc-100 rounded-sm'>
      <Link href='/' className='mr-auto'>
        home
      </Link>
    </nav>
  );
}
```

## Next steps

With this, we end the setup. In the next chapter we will be starting with `NextAuth`.

---

If you want to support my writing, you can [donate with paypal](https://www.paypal.com/donate/?hosted_button_id=4D78YQU4V5NEJ).