ghoshnirmalya / nextjs-strapi-boilerplate

:art: Boilerplate for building applications using Strapi and Next.js

This is a boilerplate for building applications using Strapi and Next.js. This boilerplate consists of the following:

1. frontend: Next.js application
2. backend: Dockerized Strapi application

• Overview
• Requirements
• Packages
  • 1. Frontend: Next.js application
  • 2. Backend: Dockerized Strapi application
• Installation
  • 1. Clone the application
  • 2. Install necessary dependencies for the frontend application
  • 3. Create a .env file and copy the contents from .env.example (present in frontend directory)
  • 4. Start the frontend application
  • 5. Go inside the directory of the backend package on another terminal window
  • 6. Start docker-compose
• Deployment
  • Frontend application
  • Backend application
• Other interesting repositories
• License

Overview

This boilerplate is built using the following technologies:

1. Chakra UI
2. Emotion
3. GraphQL
4. Apollo
5. NextAuth
6. TypeScript

It supports GraphQL Query and Mutation out of the box.

Requirements

1. Node.js
2. npm
3. Docker

Packages

1. Frontend: Next.js application

This application is the primary user-facing application. Once it’s up and running (see Development section), it’s available on http://localhost:3000/.

2. Backend: Dockerized Strapi application

Strapi is the leading open-source headless CMS. It’s 100% Javascript, fully customizable and developer-first.

Installation

1. Clone the application

git clone https://github.com/ghoshnirmalya/nextjs-strapi-boilerplate

2. Install necessary dependencies for the frontend application

cd frontend && yarn install

3. Create a .env file and copy the contents from .env.example (present in frontend directory)

We might need to run the following command:

source .env

4. Create and copy the Google client credentials

Create a new Google OAuth Client and copy the credentials (Client ID and Client Secret) in your .env file.

5. Start the frontend application

From the frontend directory, we can run the following command to start our Next.js frontend application:

yarn dev

The above command will start the frontend application on http://localhost:3000/.

6. Go inside the directory of the backend package on another terminal window

cd backend

7. Start docker-compose

docker-compose up

We need to start Docker and then run the above command which will change the current directory to the backend package’s directory and then start the backend package. If everything goes well, it’ll be up and running on http://localhost:1337/graphql.

8. Configure Strapi

a. Allow permissions for all operations on the Feed content-type for Authenticated users.

b. Allow permissions for all operations on the Feed content-type for Authenticated users as well.

c. Enable the Google provider.

d. Click on the "Done" button and now we can log into our Next.js application using our Google account.

Deployment

Frontend application

Click on the button below to deploy the frontend application on Vercel. You'll need to sign up for a free Vercel account.

Backend application

We're still working on it.

Other interesting repositories

1. Hasura Next.js Boilerplate
2. Hasura Next.js Trello Clone
3. React Search Box
4. LinkedIn Clone using Create React App

License

This project is licensed under the MIT License.

nextjs-strapi-boilerplate's Issues

[Bug] Auth doesn't work for demo

Description

It's not possible to sign in on https://nextjs-strapi-boilerplate.vercel.app

Steps:

• Go to https://nextjs-strapi-boilerplate.vercel.app
• Click "Sign in"
• Click "Sign in with google"
• Choose your account

Actual result

Expected result
Successful sign in

"Error: Forbidden" when accessing protected pages with Google provider

After successfully having enabled Google Auth provider in #31 an another error occurred regarding protected pages when I have successfully created and logged in with the account.

When accessing /my-account I am met with the following error:

Same applies for /feeds. However enabling find action on the feeds type for authorized users allow me to access the page properly. How do we handle cases where a page is not necessarily added through the backend as my-account but is instead added in the project via the page folder?

Strapi internal email-password login method

Hi,

First of all, huge thanks to @ghoshnirmalya for the boilerplate, really appreciate it!
It is however, I plan to use the default "Users" collection sits inside Strapi, with the "Email" provider.

Does anyone succeed with such a combination? I am currently trying to implement a "Credentials" provider from NextAuth, but sadly despite I stuff the user object with user id, email and even the JWT token returned from /auth/local at Strapi side, I am still confused how to use such method to call methods from Strapi, e.g. authenticated GraphQL queries.

Here is my ugly code referencing the boilerplate, still debugging, so it might not work:

Providers.Credentials({
  id: 'email',
  name: 'Email', // The name to display on the sign in form (e.g. 'Sign in with...')

  // The credentials is used to generate a suitable form on the sign in page.
  // You can specify whatever fields you are expecting to be submitted.
  // e.g. domain, username, password, 2FA token, etc.
  credentials: {
    email: { label: "Email", type: "text", placeholder: "[email protected]" },
    password: {  label: "Password", type: "password" }
  },

  authorize: async (credentials) => {
    const response = await fetch(
      `${process.env.STRAPI_APIENDPOINT}/auth/local`, {
        body: JSON.stringify({
          identifier: credentials.email,
          password: credentials.password
        }),
        headers: {
          'content-type': 'application/json'
        },
        method: "POST"
      }
    )

    const data = await response.json();

    if(typeof data.user.id !== 'undefined') {
      const user = {
        id: data.user.id,
        name: data.user.username,
        email: data.user.email,
        strapi_jwt: data.jwt
      }

      return Promise.resolve(user)
    } else {
      return Promise.resolve(null)
    }
  }
})

Regards,
Ivan

message: "Cannot read property 'id' of undefined", :(

[next-auth][error][OAUTH_CALLBACK_HANDLER_ERROR]
https://next-auth.js.org/errors#oauth_callback_handler_error Cannot read property 'id' of undefined {
message: "Cannot read property 'id' of undefined",
stack: "TypeError: Cannot read property 'id' of undefined\n" +
' at Object.jwt (webpack-internal:///(api)/./pages/api/auth/[...nextauth].ts:43:38)\n' +
' at processTicksAndRejections (internal/process/task_queues.js:95:5)\n' +
' at async Object.callback (D:\next.js strapi v3\frontend\node_modules\next-auth\core\routes\callback.js:133:25)\n' +
' at async NextAuthHandler (D:\next.js strapi v3\frontend\node_modules\next-auth\core\index.js:139:28)\n' +
' at async NextAuthNextHandler (D:\next.js strapi v3\frontend\node_modules\next-auth\next\index.js:21:19)\n' +
' at async Object.apiResolver (D:\next.js strapi v3\frontend\node_modules\next\dist\server\api-utils\node.js:184:9)\n' +
' at async DevServer.runApi (D:\next.js strapi v3\frontend\node_modules\next\dist\server\next-server.js:397:9)\n' +
' at async Object.fn (D:\next.js strapi v3\frontend\node_modules\next\dist\server\base-server.js:473:37)\n' +
' at async Router.execute (D:\next.js strapi v3\frontend\node_modules\next\dist\server\router.js:233:32)\n' +
' at async DevServer.run (D:\next.js strapi v3\frontend\node_modules\next\dist\server\base-server.js:583:29)',
name: 'TypeError'
}

Error when logging in by Google on the frontend

I'm getting this error, strapi working normally, but I can't log into the strapi through the frontend.

Does anyone go through this?

 OAuthProfile: {
    id: '104265214333844458905',
    email: '[email protected]',
    verified_email: true,
    name: 'SHARKDEV SHARKDEV',
    given_name: 'SHARKDEV',
    family_name: 'SHARKDEV',
    picture: 'https://lh3.googleusercontent.com/a-/AOh14Gh4nDcKYkBW5fcxAC4yb4SjgY8zi5QKdNJEL-B7=s96-c',
    locale: 'pt-BR'
  }
}
[next-auth][error][adapter_connection_error] 
https://next-auth.js.org/errors#adapter_connection_error error: password authentication failed for user "strapi"
    at Parser.parseErrorMessage (D:\DEV\App\tmp\teste\frontend\node_modules\pg-protocol\dist\parser.js:278:15)
    at Parser.handlePacket (D:\DEV\App\tmp\teste\frontend\node_modules\pg-protocol\dist\parser.js:126:29)
    at Parser.parse (D:\DEV\App\tmp\teste\frontend\node_modules\pg-protocol\dist\parser.js:39:38)
    at Socket.<anonymous> (D:\DEV\App\tmp\teste\frontend\node_modules\pg-protocol\dist\index.js:10:42)
    at Socket.emit (events.js:315:20)
    at addChunk (_stream_readable.js:295:12)
    at readableAddChunk (_stream_readable.js:271:9)
    at Socket.Readable.push (_stream_readable.js:212:10)
    at TCP.onStreamRead (internal/stream_base_commons.js:186:23) {
  length: 164,
  severity: 'FATAL',
  code: '28P01',
  detail: undefined,
  hint: undefined,
  position: undefined,
  internalPosition: undefined,
  internalQuery: undefined,
  where: undefined,
  schema: undefined,
  table: undefined,
  column: undefined,
  dataType: undefined,
  constraint: undefined,
  file: 'd:\\pginstaller_13.auto\\postgres.windows-x64\\src\\backend\\libpq\\auth.c',
  line: '334',
  routine: 'auth_failed'
}
[next-auth][error][oauth_callback_handler_error]
https://next-auth.js.org/errors#oauth_callback_handler_error TypeError: Cannot destructure property 'manager' of 'connection' as it is null.
    at Object.<anonymous> (D:\DEV\App\tmp\teste\frontend\node_modules\next-auth\dist\adapters\typeorm\index.js:112:9)
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (D:\DEV\App\tmp\teste\frontend\node_modules\next-auth\dist\adapters\typeorm\index.js:26:103)
    at _next (D:\DEV\App\tmp\teste\frontend\node_modules\next-auth\dist\adapters\typeorm\index.js:28:194)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)

Update starter to Strapi V4

As this starter is being featured in the new v4 examples from Strapi’s blog I think it would make sense to update it as it currently uses Strapi v3.

How to return full User object after logging in?

As of now it only returns name, email and image. I have an avatar in my database but it’s not showing in User object. How do I go about this?

TSLint has been deprecated in favor of ESLint.

Will ESLint be a better choice?

Postgres connection problems after fresh repository cloned

Hello, first of all, thank you that you have decided to fill in this lack of a suitable tool for combining strapi authentication with next-auth authorization.

I have such a problem. Freshly cloned from GitHub, my google auth data in .env and when I try to create an account or sign in then I got the error: "Try signing with a different account." (logs from nextjs on the bottom)

Google?NextJS? can't connect to database, but I don't know why? I didn't chance anything...
in env:
NEXT_PUBLIC_DATABASE_URL=postgres://strapi:strapi@localhost:5432/strapi

by the way... Can you explain how this is working? Does next-auth connect directly to the database? Completely disregarding the Strapi? It should working identical without Strapi?

`event - build page: /api/auth/[...nextauth]

wait - compiling...
event - compiled successfully
[next-auth][debug][profile_data] {
id: 'xxx',
email: '[email protected]',
verified_email: true,
name: 'xxx',
given_name: 'xxx',
family_name: 'xxx',
picture: 'https://xxx.x/photo.jpg',
locale: 'xx'
}
[next-auth][debug][oauth_callback_response] {
profile: {
name: 'xxx',
email: '[email protected]',
image: 'https://xxxx.x/photo.jpg'
},
account: {
provider: 'google',
type: 'oauth',
id: 'xxx',
refreshToken: undefined,
accessToken: 'xxx.xxxx.xxx',
accessTokenExpires: null
},
OAuthProfile: {
id: 'xxxx',
email: '[email protected]',
verified_email: true,
name: 'xxx',
given_name: 'xxx',
family_name: 'xxx',
picture: 'https://xxx.x/photo.jpg',
locale: 'xx'
}
}
[next-auth][error][adapter_connection_error] error: role "strapi" does not exist
at Parser.parseErrorMessage (/Users/xxxx/test-env/nextjs-strapi-boilerplate/frontend/node_modules/pg-protocol/dist/parser.js:278:15)
at Parser.handlePacket (/Users/xxx/test-env/nextjs-strapi-boilerplate/frontend/node_modules/pg-protocol/dist/parser.js:126:29)
at Parser.parse (/Users/xxx/test-env/nextjs-strapi-boilerplate/frontend/node_modules/pg-protocol/dist/parser.js:39:38)
at Socket. (/Users/xxx/test-env/nextjs-strapi-boilerplate/frontend/node_modules/pg-protocol/dist/index.js:8:42)
at Socket.emit (events.js:314:20)
at addChunk (_stream_readable.js:303:12)
at readableAddChunk (_stream_readable.js:279:9)
at Socket.Readable.push (_stream_readable.js:218:10)
at TCP.onStreamRead (internal/stream_base_commons.js:188:23) {
length: 98,
severity: 'FATAL',
code: '28000',
detail: undefined,
hint: undefined,
position: undefined,
internalPosition: undefined,
internalQuery: undefined,
where: undefined,
schema: undefined,
table: undefined,
column: undefined,
dataType: undefined,
constraint: undefined,
file: 'miscinit.c',
line: '607',
routine: 'InitializeSessionUserId'
}
https://next-auth.js.org/errors#adapter_connection_error
[next-auth][error][oauth_callback_handler_error] TypeError: Cannot destructure property 'manager' of 'connection' as it is null.
at Object. (/Users/xxx/test-env/nextjs-strapi-boilerplate/frontend/node_modules/next-auth/dist/adapters/typeorm/index.js:102:9)
at Generator.next ()
at asyncGeneratorStep (/Users/xxxx/test-env/nextjs-strapi-boilerplate/frontend/node_modules/next-auth/dist/adapters/typeorm/index.js:28:103)
at _next (/Users/xxxx/test-env/nextjs-strapi-boilerplate/frontend/node_modules/next-auth/dist/adapters/typeorm/index.js:30:194)
at processTicksAndRejections (internal/process/task_queues.js:93:5)
https://next-auth.js.org/errors#oauth_callback_handler_error`

I don't understand NEXT_PUBLIC_DATABASE_URL

Yes, I know that running on the same machine there is no security problem but now let's assume that the postgres server is on another server. Why export it in public?

Google Auth - Error 400: redirect_uri_mismatch

When authorizing with Google the following error occurs on client:

Error 400: redirect_uri_mismatch
The redirect URI in the request, http://localhost:3000/api/auth/callback/google, does not match the 
ones authorized for the OAuth client. To update the authorized redirect URIs, visit:
https://console.developers.google.com/apis/credentials/oauthclient/${your_client_id}?project=${your_project_number}

I have properly added the GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET to my .env file. This is the following setup on my Google API credentials:

Authorized JavaScript origins: http://localhost
Authorized redirect URIs: http://localhost:3000 Remark: I have also tried http://localhost:1337, but nothing works.