Next.js Discord

2023-10-27T12:09:23.000Z

import axios from "axios";
import { type NextAuthOptions } from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";
import { API_URL } from "@/lib/gql";
import { UserLoginDocument, type UserLoginMutation } from "@/gql/graphql";

export const authOptions: NextAuthOptions = {
    session: {
        strategy: "jwt",
        maxAge: 24 * 60 * 60,
    },
    pages: {
        signIn: "/en/login",
    },
    providers: [
        CredentialsProvider({
            id: "credentials",
            name: "Credentials",
            credentials: {
                email: { type: "email", label: "Email" },
                password: { type: "password", label: "Password" },
                remember: { type: "bool", label: "Remember me" },
            },
            authorize: async (credentials: { email: string; password: string } | undefined) => {
                const { email, password } = credentials || {};
                const res = await axios.post<{ data: UserLoginMutation }>(API_URL, {
                    query: UserLoginDocument,
                    variables: { email, password },
                });

                if (res.status !== 200) {
                    return null;
                }

                if (res.data?.data.userLogin?.token) {
                    return {
                        id: email || "",
                        email,
                        ...(res.data?.data.userLogin || {}),
                    };
                } else {
                    return null;
                }
            },
        }),
    ],
    callbacks: {
        jwt: async ({ account, token }) => {
            if (account) {
                token.accessToken = account.access_token;
            }
            return token;
        },
    },
};

route.ts

import NextAuth from "next-auth";
import { authOptions } from "@/lib/auth";
const handler = NextAuth(authOptions);
export { handler as GET, handler as POST };

Please tag me while answering so I can be notified, thanks

2023-10-27T12:14:58.000Z

use that digest ID and check if a log with that id is present in your vercel logs

2023-10-27T12:18:55.000Z

It's deployed on aws amplify

I think it nto support the next auth??

@Clown

2023-10-27T12:29:16.000Z

oh yeah, i accidentally wrote vercel logs. I meant the logs in general. Amplify must provide some logs that the app itself returns right?

2023-10-27T12:30:20.000Z

[next-auth][error][NO_SECRET]

But I already configured my secret @Clown

2023-10-27T12:32:07.000Z

well it cant find it. Recheck the name of the environment variable in your project settings and inside your code aswell

also check by creating a dummy variable whether you can even access environment variables or not

2023-10-27T12:32:52.000Z

Yes I did and i'm able to access

import { UserLoginDocument, type UserLoginMutation } from "@/gql/graphql";

export const authOptions: NextAuthOptions = {
    secret: process.env.NEXTAUTH_SECRET,

I am using only in one place

2023-10-27T12:37:54.000Z

i cant think of any other reason its not working tbh

unless this secret is somehow being called in a client component

2023-10-27T12:46:08.000Z

Yes it;s calling in a client component but the parent component is a server

As you know registerform a client componnent

2023-10-27T12:47:49.000Z

i dont think that should be a issue

https://awstip.com/use-aws-amplify-with-next-auth-in-next13-62c28b13af77#:~:text=To%20get%20AWS%20Amplify%20%2B%20Cognito,info%20from%20the%20Amplify%20docs).

2023-10-27T12:48:09.000Z

In that blog it;s saying some sever issue?

2023-10-27T12:49:49.000Z

if its a no secret error then its not the same issue i think.

did you check if your environment variable is being named correctly in project settings

i know you probably arent doing this but im going to ask this anyways, in production you dont use the .env file and dont push that file to git.

you have to set those in your amplify project setting

https://docs.amplify.aws/lib/ssr/q/platform/js/#1-run-amplifyconfigure-awsexports-ssr-true--in-undefined-the-client-side-and-server-side-code

2023-10-27T12:51:22.000Z

Yep, everything is correctly setup

I havem't added the aws-amplify

'use client';

import { Amplify } from 'aws-amplify';
import awsExports from '@/aws-exports';

Amplify.configure({ ...awsExports, ssr: true });

export default function Home() {
  return (
    {/* Render a login form for your users */}
  )
}

Something like that

2023-10-27T14:30:25.000Z

@Muhammed Khal yo yo

Amplify is weird

I ran into this issue a while ago with next auth

One sec I have a solution

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - yarn install --frozen-lockfile
    build:
      commands:
        - touch .env
        - echo "NEXTAUTH_SECRET=$NEXTAUTH_SECRET" >> .env
        - echo "NEXTAUTH_URL=$NEXTAUTH_URL" >> .env
        - yarn run build
  artifacts:
    baseDirectory: .next
    files:
      - "**/*"
  cache:
    paths:
      - node_modules/**/*

modify the file as needed for your specific build system

2023-10-27T14:32:24.000Z

sure

2023-10-27T14:32:42.000Z

but the trick is to create an env file during deploy

2023-10-27T14:32:42.000Z

do i need to install amplify on my nextjs app??

2023-10-27T14:32:52.000Z

and then echo your variables into it

2023-10-27T14:32:53.000Z

how can i do?

@linesofcode yml version: 1 frontend: phases: preBuild: commands: - yarn install --frozen-lockfile build: commands: - touch .env - echo "NEXTAUTH_SECRET=$NEXTAUTH_SECRET" >> .env - echo "NEXTAUTH_URL=$NEXTAUTH_URL" >> .env - yarn run build artifacts: baseDirectory: .next files: - "**/*" cache: paths: - node_modules/**/*

2023-10-27T14:33:10.000Z

after defining them in your amplify env variables in the ui

do i need to install amplify on my nextjs app??

No you do not

The solution is above

create a file called amplify.yml in your root

and modify it to your needs based on the file I provided

(if you dont use yarn for example)

Make sure NEXTAUTH_SECRET and NEXTAUTH_URL are defined in the env settings via the amplify ui

This same logic applies to ALL server side env variables when using amplify and nextjs

2023-10-27T14:34:39.000Z

that will be amplify.yml

2023-10-27T14:34:44.000Z

yes

Please let me know if it works

2023-10-27T14:35:20.000Z

sure

@linesofcode Make sure NEXTAUTH_SECRET and NEXTAUTH_URL are defined in the env settings via the amplify ui

2023-10-27T15:32:13.000Z

@linesofcode I am not using yaml , but still do I need to create that file and do I required to install any dependencies?

2023-10-27T15:33:02.000Z

amplify ui mean, setting the env in amplify like we do in vercel?

2023-10-27T15:33:22.000Z

Yes.

2023-10-27T15:33:55.000Z

Yes I already did that one

Are you free now, so I can take some of your time>?

@linesofcode

2023-10-27T15:35:30.000Z

Iâ€™m not free

I provided the solutions above

2023-10-27T15:35:52.000Z

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - pnpm install --frozen-lockfile
    build:
      commands:
        - touch .env
        - echo "NEXTAUTH_SECRET=$NEXTAUTH_SECRET" >> .env
        - echo "NEXTAUTH_URL=$NEXTAUTH_URL" >> .env
        - pnpm run build
  artifacts:
    baseDirectory: .next
    files:
      - "**/*"
  cache:
    paths:
      - node_modules/**/*

I did like that

2023-10-27T15:36:03.000Z

Okay

And whatâ€™s the result?

2023-10-27T15:36:25.000Z

Re-deploying

2023-10-27T16:09:58.000Z

Still same @linesofcode

2023-10-27T16:11:09.000Z

Are you sure you set the variables in the amplify ui for all branches?

2023-10-27T16:11:18.000Z

Yes

That's my amplify and also folder structure

2023-10-27T16:14:27.000Z

I'm not sure then\

2023-10-27T16:14:45.000Z

Are you using the app router?

With next auth?

2023-10-27T16:14:50.000Z

2023-10-27T16:14:55.000Z

Page routers?

2023-10-27T16:14:58.000Z

i use amplify with page

btw your google client and secret, 99% should not be public

looking at that screenshot

@linesofcode btw your google client and secret, 99% should not be public

2023-10-27T16:15:25.000Z

I am using amplify with app and next auth

2023-10-27T16:15:44.000Z

But it's in env

2023-10-27T16:15:58.000Z

you're leaking them to the public

2023-10-27T16:16:05.000Z

Deleted

2023-10-27T16:16:15.000Z

if you're using them for oauth, make sure they are server only

just like the nextauth env variables

and add them in amplify.yml

idk what to tell you about the app router not working in amplify

they even warn you it's expiremtnal still

2023-10-27T16:16:46.000Z

I haven't implemented the google auth yet, because trying to figure this issue

@linesofcode they even warn you it's expiremtnal still

2023-10-27T16:17:11.000Z

amplify does not support app router completly

2023-10-27T16:17:12.000Z

Is that mean, it supports only on page router

2023-10-27T16:17:26.000Z

100% page router, not 100% app router

2023-10-27T16:17:34.000Z

In that case I should use the aws auth right instead of the next auth?

@linesofcode no offense but amplify sucks

2023-10-27T16:17:51.000Z

i have no clue

no offense but amplify sucks

if you have the option to use something else, use it

2023-10-27T16:18:36.000Z

10000000% agreed

Vercel is really awesome

2023-10-27T16:18:47.000Z

you can try SST

if you're locked into AWS

https://sst.dev/

it definetly works with nextjs

2023-10-27T16:20:02.000Z

THanks

It'll works with amplify right?

2023-10-27T16:20:43.000Z

or idk

but i dont think so

2023-10-27T16:21:10.000Z

Okay

2023-10-27T17:48:41.000Z

Hai @linesofcode , thanks for the guide, after some tweaks to amplify and nextjs config it got worked

2023-10-27T17:48:50.000Z

Nice!

2023-10-27T17:48:51.000Z

Thanks for the help

2023-10-27T17:48:52.000Z

what was the solution?

2023-10-27T17:50:29.000Z

In commands, first I installed the pnpm globally then installing the frozen lockfile then in next.config I created a env object then I added the nextauthseceret , of course witth process.env.nextauthsecret