ghoshnirmalya / nextjs-strapi-boilerplate Goto Github PK
View Code? Open in Web Editor NEW:art: Boilerplate for building applications using Strapi and Next.js
Home Page: https://nextjs-strapi-boilerplate.vercel.app
License: MIT License
:art: Boilerplate for building applications using Strapi and Next.js
Home Page: https://nextjs-strapi-boilerplate.vercel.app
License: MIT License
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?
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
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.
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`
[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'
}
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?
Description
It's not possible to sign in on https://nextjs-strapi-boilerplate.vercel.app
Steps:
Expected result
Successful sign in
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)
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?
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.
Will ESLint be a better choice?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.