[TOPIC] Strapi authentication with Next.js?

[mbudak]

Could you provide an strapi authentication with nextjs?
I don't want to use third party authentication system such as auth0 but I want to stick with strapi jwt.

I struggled to implement a real world application which has "app nav bar, mainlayout and footer" with nextjs strapi authentication.

Thank you,
Murat

[ghoshnirmalya]

I can pick this one up. I've worked with NextAuth and can use it with Strapi for authentication.

[malgamves]

hey @ghoshnirmalya is this the same as #109 or would you like to do them separately?

[ghoshnirmalya]

hey @ghoshnirmalya is this the same as #109 or would you like to do them separately?

This will be a separate tutorial.

[HarunKilic]

@ghoshnirmalya when can we expect this tutorial? And will it be with REST or GraphQL?

[ghoshnirmalya]

@ghoshnirmalya when can we expect this tutorial? And will it be with REST or GraphQL?

I can have this tutorial ready by 26th August. The authentication be done via REST.

[malgamves]

Awesome! I'll schedule it that way then 😄

[ghoshnirmalya]

I can pick this one up. I've worked with NextAuth and can use it with Strapi for authentication.

I'm trying to use NextAuth with Strapi. But, it seems like the schema that NextAuth uses is different from what Strapi uses for users, accounts, etc. As a result, I might be using JWT to handle authentication instead of using NextAuth.

I'll post updates on this issue.

[malgamves]

Awesome! I'll assign you as an Author. Lot's of auth articles coming out! Love it 🎊

[ghoshnirmalya]

@malgamves The boilerplate for building applications using Strapi and Next.js is available on Github.

This boilerplate is built using the following technologies:

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

The readme file contains all the necessary documentation. I also plan to do a detailed documentation on my website.

It'd be great if you guys could help me by reporting any bugs, typos or anything that'd make the boilerplate better. Please feel free to create a new issue.

[malgamves]

This looks amazing!! I really like how well this is documented. Can't wait to have a look at the article. Do you have a demo app running somewhere?

[ghoshnirmalya]

This looks amazing!! I really like how well this is documented. Can't wait to have a look at the article. Do you have a demo app running somewhere?

@malgamves I haven't deployed it anywhere yet. However, I plan to deploy the Strapi application on Heroku and the Next.js application on Vercel soon.

[sebacampos]

@ghoshnirmalya Thanks for the boilerplate!! I cloned the repo and had some trouble but finally could make it work. My problems were mostly on DB settings part so I left a comment on this here explaining my steps to make it work in case someone else finds it useful

[ghoshnirmalya]

@sebacampos Thank you for your help. I've added a comment which should help in fixing the issue.

[ghoshnirmalya]

@malgamves @sebacampos Do you guys know if it's a good idea to save the volume (in case of Docker) or default data for Strapi? I'd like to save a few records in my database so that anyone who clone the boilerplate can get the development server up and running very easily.

I'd like to save the default data:

1. GraphQL plugin enabled by default.
2. Google provider enabled by default. The value can be added later or extracted from an env file.
3. Default permissions of a few models (User and Feed) for Authenticated users.

[sebacampos]

@malgamves @sebacampos Do you guys know if it's a good idea to save the volume (in case of Docker) or default data for Strapi? I'd like to save a few records in my database so that anyone who clone the boilerplate can get the development server up and running very easily.

I'd like to save the default data:

1. GraphQL plugin enabled by default.
2. Google provider enabled by default. The value can be added later or extracted from an env file.
3. Default permissions of a few models (User and Feed) for Authenticated users.

@ghoshnirmalya That would be nice! I don't have that much experience with Strapi on Docker to determine the best way to do it. I guess using Docker would be easier for this need, but i'm thinking for the cases that run without Docker you will need to provide a DB dump with the records already inserted, and then anyone cloning the repo will import that dump into their local DB, maybe? Anyway should wait someone from Strapi team answer on this one for any hint or suggestions

[malgamves]

@malgamves @sebacampos Do you guys know if it's a good idea to save the volume (in case of Docker) or default data for Strapi? I'd like to save a few records in my database so that anyone who clone the boilerplate can get the development server up and running very easily.

I'd like to save the default data:

1. GraphQL plugin enabled by default.

2. Google provider enabled by default. The value can be added later or extracted from an env file.

3. Default permissions of a few models (User and Feed) for Authenticated users.

Hey, what we do with our Starter is we populate the database on build using the bootstrap.js a good example is our Gatsby Starter. No need for Docker volumes then. I hope this helps somehow.

[malgamves]

hey @ghoshnirmalya any updates on this?

[ghoshnirmalya]

hey @ghoshnirmalya any updates on this?

@malgamves I've shared the link to the article with you on Slack.

[7alip]

@malgamves The boilerplate for building applications using Strapi and Next.js is available on Github.

This boilerplate is built using the following technologies:

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

The readme file contains all the necessary documentation. I also plan to do a detailed documentation on my website.

It'd be great if you guys could help me by reporting any bugs, typos or anything that'd make the boilerplate better. Please feel free to create a new issue.

Hi @ghoshnirmalya!

Thanks for your great work. I couldn't make it work because I don't know what will be the redirect urls in both Google and Strapi sides. I got an error when I click sign in button:

In Google console Authorised redirect URIs: <my-deployed-frontend-url>/api/auth/callback/google
In Strapi The redirect URL to your front-end app: <my-deployed-frontent-url>/api/auth/callback/google

Whit this configurations, when I click sign in button, I see Try signing with a different account. message in a blue box. Could you provide redirect urls for production both for Google and Strapi in your tutorial?

Thanks in advance.

[kulbon]

I also have problems with this tutorial. The biggest one is that Strapi has a token and next-auth has a token also, no matter if you replace it with this code:

  if (isSignIn) {
        const response = await fetch(
             `${process.env.NEXT_PUBLIC_API_URL}/auth/${account.provider}/callback?access_token=${account?.accessToken}`
        );

        const data = await response.json();
        token.jwt = data.jwt;
        token.id = data.user.id;
      }
}

You can set Strapi token expiration to 1h. When you log in with next-auth after 1h all yours api calls will be unauthorized (401) and you still will be logged in on frontend. Correct me if i am wrong.

[ghoshnirmalya]

@7alip Can you try adding the following callback urls?

http://localhost:3000/api/auth/callback/google
http://localhost:1337/connect/google/callback

Let me know if this works for you.

[ghoshnirmalya]

@kulbon Thank you for reporting this issue. I think that you can set the maxAge in NextAuth. Check out their documentation.

[kulbon]

@ghoshnirmalya I did it already.

// Seconds - How long until an idle session expires and is no longer valid.
maxAge: 30 * 24 * 60 * 60, // 30 days

I think that IDLE is a keyword. I Set maxAge to 60, if you refresh page once in 60s then token expiration will be renewed. To be logged out, you have to literally do nothing for 60s.

[7alip]

@ghoshnirmalya

1. mongodb peerOptionalDependencies

I have noticed that the solution of this problem might be @iaincollins 's solution in vercel.

---

2. Serverless Functions Limitation Vercel

When I try to login in your app not always but sometimes I encounter with this error page. You can check your functional logs in vercel dashboard. The reason of the error is might be because of limitations.

---

3. Serverless Functions Limitation Netlify

{"errorMessage":"2020-11-08T09:14:03.323Z 5964255a-ea9b-46d6-9b1f-49f7cfb4367e Task timed out after 10.01 seconds"}

[TasTing]

Is graphql an essential plugin? Next's dynamic routing is one of reason I'd like to use it.

[kulbon]

Is graphql an essential plugin? Next's dynamic routing is one of reason I'd like to use it.

It is not. You can replace graphql queries with REST API calls

[malgamves]

This was published - User Authentication in Next.js with Strapi

[fodurrr]

I can pick this one up. I've worked with NextAuth and can use it with Strapi for authentication.

I'm trying to use NextAuth with Strapi. But, it seems like the schema that NextAuth uses is different from what Strapi uses for users, accounts, etc. As a result, I might be using JWT to handle authentication instead of using NextAuth.

I'll post updates on this issue.

Hi, @ghoshnirmalya , I try to use your final version of the strapi-next-auth tutorial but with Amazon cognito provider, It seems working but no new user created in Strapi users-permission-user table. How did you solved the different schema you mentioned here? (next-auth creates accounts and users tables, but strapi stores users in the users-permission-user table, therefore the authenticated user is not visible in the Strapi administration panel. Any help would be appreciated.