According to the docs https://next-auth.js.org/configuration/options#secret ,
adding a NEXTAUTH_SECRET as an environment variable, you don't have to define this option.
But in vercel production I still get,
2022-03-24T10:37:19.571Z 710a4b4b-24d3-4fb4-b991-9eb44179efc8 ERROR [next-auth][error][NO_SECRET]
https://next-auth.js.org/errors#no_secret Please define a `secret` in production. MissingSecret [MissingSecretError]: Please define a `secret` in production.
at assertConfig (/var/task/node_modules/next-auth/core/lib/assert.js:24:14)
at NextAuthHandler (/var/task/node_modules/next-auth/core/index.js:34:52)
at NextAuthNextHandler (/var/task/node_modules/next-auth/next/index.js:16:51)
at /var/task/node_modules/next-auth/next/index.js:52:38
at Object.apiResolver (/var/task/node_modules/next/dist/server/api-utils/node.js:182:15)
at processTicksAndRejections (internal/process/task_queues.js:95:5)
at async NextNodeServer.runApi (/var/task/node_modules/next/dist/server/next-server.js:386:9)
at async Object.fn (/var/task/node_modules/next/dist/server/base-server.js:488:37)
at async Router.execute (/var/task/node_modules/next/dist/server/router.js:228:32)
at async NextNodeServer.run (/var/task/node_modules/next/dist/server/base-server.js:600:29) {
code: 'NO_SECRET'
}
env is set as NEXTAUTH_SECRET=MYSECRETSNAPBOOK
Code:
export default NextAuth({
providers: [
GoogleProvider({
clientId: process.env.GOOGLE_CLIENT_ID,
clientSecret: process.env.GOOGLE_CLIENT_SECRET,
}),
],
pages: {
signIn: '/auth/signin',
},
callbacks: {
async session({ session, token, user }) {
session.user.username = session.user.name
.split(' ')
.join('')
.toLocaleLowerCase()
session.user.uid = token.sub
return session
},
},
})
Here is the Fix,
In .env file (or your vercel env) add NEXT_PUBLIC_SECRET=anything (Make sure you have NEXT_PUBLIC_SECRET name as it is)
Add a secret option in [...nextauth].js
providers: [//Your providers],
secret: process.env.NEXT_PUBLIC_SECRET
Make sure you don't use 7beta version. Up or Downgrade it to 4.1.2 (npm i next-auth#4.1.2)
Related
I am trying to deploy NextJs and NextAuth.js to AWS using CDK (Cloud Development Kit). I have cloned the NextAuth.js example project (https://github.com/nextauthjs/next-auth-example) and
installed "serverless-http" for handling the binding from Lambda to NextJs. I attempted to follow this guide https://remaster.com/blog/nextjs-lambda-serverless-framework but using AWS CDK instead of the serverless.yml file as I am integrating it with existing infrastructure.
next.config.js:
/** #type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
swcMinify: true,
images: {
unoptimized: true
},
output: 'standalone'
}
module.exports = nextConfig
[...nextauth].ts (From the example but using a simple credentials provider that always resolves):
import NextAuth, { NextAuthOptions } from "next-auth"
import CredentialsProvider from "next-auth/providers/credentials";
export const authOptions: NextAuthOptions = {
providers: [
CredentialsProvider({
name: "Credentials",
credentials: {
username: { label: "Username", type: "text", placeholder: "jsmith" },
password: { label: "Password", type: "password" }
},
async authorize(credentials, req) {
return { id: "1", name: "J Smith", email: "jsmith#example.com" }
}
})
],
theme: {
colorScheme: "light",
},
callbacks: {
async jwt({ token }) {
token.userRole = "admin"
return token
},
},
}
export default NextAuth(authOptions)
server.ts:
import { NextConfig } from "next";
import NextServer from "next/dist/server/next-server";
import serverless from "serverless-http";
// #ts-ignore
import { config } from "./.next/required-server-files.json";
const nextServer = new NextServer({
hostname: "localhost",
port: 3000,
dir: __dirname,
dev: false,
conf: {
...(config as NextConfig),
},
});
export const handler = serverless(nextServer.getRequestHandler());
It is being built using the following script:
#!/bin/bash
BUILD_FOLDER=.dist
yarn build
rm -rf $BUILD_FOLDER
mv .next/standalone/ $BUILD_FOLDER/
cp -r .next/static $BUILD_FOLDER/.next
rm $BUILD_FOLDER/server.js
cp -r next.config.js $BUILD_FOLDER/
cp -r node_modules/serverless-http $BUILD_FOLDER/node_modules/serverless-http
tsc server.ts --outDir .dist --esModuleInterop true
cp -r public $BUILD_FOLDER/
This is deployed using AWS written in CDK C#. Primarily using a HttpApi and a single Lambda. Each configured as shown below:
Lambda:
var function = new Function(this, "nextjs-function", new FunctionProps
{
Code = Code.FromAsset(...".dist"),
Handler = "server.handler",
Runtime = Runtime.NODEJS_16_X,
...
Environment = new Dictionary<string, string>
{
{ "NEXTAUTH_URL", "https://myDomainName.com" },
{ "NEXTAUTH_SECRET", portalSecret },
}
});
HttpApi:
var httpApi = new HttpApi(this, "http-api", new HttpApiProps
{
DisableExecuteApiEndpoint = true,
DefaultIntegration = new HttpLambdaIntegration("nextjs-route", function),
DefaultDomainMapping = new DomainMappingOptions
{
DomainName = "myDomainName.com"
}
});
Opening the deployed webpage and clicking the "Sign In" button at the top, I get taken to /api/auth/signin?callbackUrl=%2F with a form. Without touching the credentials I click "Sign in with credentials". This results in the page reloading and nothing happening. Expected behaviour should be a session and a redirect back to the home page (/) as is happening when running it locally using either yarn dev or yarn build && yarn start.
I get no errors client/server-side thus leaving me in the dark.
I suspect that it has to do with domain configuration but I am unable to find the problem. I tested with another NextJs/NextAuth project using a AWS Cognito provider. This also had problems as when I clicked the sign in button I got an "Unexpected token" error due to the underlying signIn(...) function (from the NextAuth library) trying to parse the fetched page as JSON, which turned out to be the sign-in-page. Thus my suspicion of something domain-related.
I am trying to extend what is returned in the StravaProvider profile() in nextAuth
pages/api/auth/[...nextauth].js
export default NextAuth({
providers: [
StravaProvider({
clientId: process.env.STRAVA_CLIENT_ID,
clientSecret: process.env.STRAVA_CLIENT_SECRET,
profile(profile) {
// LOGS FINE IN CONSOLE
console.log("profile", profile);
return {
id: profile.id,
image: profile.profile,
name: `${profile.firstname} ${profile.lastname}`,
// THE FOLLOWING DOES NOT RETURN
profile: profile,
};
},
}),
],
How do I expose the full profile object?. It's only returning the image and name.
In my console log - within my StravaProvider of profile - I can see the whole object, but can't seem to return it?
If I assign profile to the name key this works. I seem to be limited with the keys I can add?
StravaProvider{...
profile(profile) {
return {
// THE FOLLOWING WORKS
name: profile,
};
},
The returned session object from my initial example and how I am accessing it is:
const { data: session } = useSession();
console.log(session);
{
"user": {
"name": "JOE BLOGGS",
"image": "https://dgalywyr863hv.cloudfront.net/pictures/athletes/2909982/3009569/1/large.jpg"
},
"expires": "2023-02-03T13:39:01.521Z"
}
I realise I can use a callback and modify the session, but I need the entire profile there in the first place from the Provider to do that.
Repo - https://github.com/webknit/NextAuth/
My NextAuth are returning 404 when searching for api/auth/session at credential provider custom login, seems like Next Auth are pointing to the wrong url.
My next.config.js have a basePath that points to a subfolder basePath: '/twenty-test' and my NEXTAUTH_URL is already set to my subdomain,
but when I go to my credential provider login custom page (that was working at localhost because it was not at a subdomain), i see an 404 error at console like https://explample.com/api/auth/session 404.
This is my custom provider config:
providers: [
CredentialProvider({
name: 'Credentials',
type: 'credentials',
async authorize(credentials) {
//
if(credentials.email == "john#gmail.com" && credentials.password == "test"){
return {
id: 2,
name: 'John Doe',
email: 'john#gmail.com',
permition: {
group: 2,
level: 0
}
}
}
return null;
}
})
],
This is my next.config.js
const nextConfig = {
reactStrictMode: true,
basePath: '/twenty-test',
images: {
domains: ['example.com'],
},
}
module.exports = nextConfig
This is my NEXTAUTH_URL env variable
NEXTAUTH_URL="https://example.com/twenty-test/api/auth"
This is my getCsrfToken config
export async function getServerSideProps(context) {
return {
props: {
csrfToken: await getCsrfToken(context)
}
}
}
My project are not on vercel. I'm using a custom server config to deploy with cPanel
The problem was on building the app in localhost and deploying on server.
The app was building expecting NEXTAUTH_URL as localhost, and simply changing the .env variable on server didnt worked.
The solution was building the app on server.
Another workaround was replacing the localhost NEXTAUTH_URL ocurrences after building with the value of NEXTAUTH_URL on server.
I've updated Nextjs to it's newest version and also updated next-auth and the prisma adapter as specified by the docs.
However, when I try to authenticate in the app with signIn I get the following error with the latest updates:
[next-auth][error][OAUTH_CALLBACK_HANDLER_ERROR]
https://next-auth.js.org/errors#oauth_callback_handler_error getUserByAccount is not a function {
message: 'getUserByAccount is not a function',
stack: 'TypeError: getUserByAccount is not a function\n' +
' at Object.callback (/home/.../node_modules/next-auth/core/routes/callback.js:81:39)\n' +
' at runMicrotasks (<anonymous>)\n' +
' at processTicksAndRejections (internal/process/task_queues.js:95:5)\n' +
' at async NextAuthHandler (/home/.../node_modules/next-auth/core/index.js:103:28)\n' +
' at async NextAuthNextHandler (/home/.../node_modules/next-auth/next/index.js:40:7)\n' +
' at async [...]/node_modules/next-auth/next/index.js:80:32\n' +
' at async Object.apiResolver (/home/.../node_modules/next/dist/server/api-utils.js:102:9)\n' +
' at async DevServer.handleApiRequest (/home/.../node_modules/next/dist/server/next-server.js:1014:9)\n' +
' at async Object.fn (/home/.../node_modules/next/dist/server/next-server.js:901:37)\n' +
' at async Router.execute (/home/.../node_modules/next/dist/server/router.js:210:32)',
name: 'TypeError'
}
Is there something I'm doing wrong, or is there an incompatibility I'm missing?
Relevant package.json:
...
"#next-auth/prisma-adapter": "^0.5.2-next.19",
"next": "^12.0.3",
"next-auth": "4.0.0-beta.6",
"prisma": "^3.4.1",
...
[...nextauth].ts:
import NextAuth from 'next-auth';
import CognitoProvider from 'next-auth/providers/cognito';
import { PrismaAdapter } from '#next-auth/prisma-adapter';
import { PrismaClient } from '#prisma/client';
const prisma = new PrismaClient();
export default NextAuth({
adapter: PrismaAdapter(prisma),
providers: [
CognitoProvider({
clientId: process.env.COGNITO_CLIENT_ID,
clientSecret: process.env.COGNITO_CLIENT_SECRET,
issuer: process.env.COGNITO_ISSUER,
}),
],
callbacks: {
async session({ session, user }) {
session.userId = user.id;
session.role = user.role;
return Promise.resolve(session);
},
},
});
Finally resolved the problem. Since next-auth has moved to monorepo, updating package was not enough, you need to uninstall it first then install it again.
Run:
npm uninstall next-auth #next-auth/prisma-adapter
then:
npm install #next-auth/prisma-adapter
This fixed it for me.
In the NextAuth.JS 4.0 the "Prisma schema" have slightly changed.
From the upgrade guide:
created_at/createdAt and updated_at/updatedAt fields are removed from all Models.
user_id/userId consistently named userId.
compound_id/compoundId is removed from Account.
access_token/accessToken is removed from Session.
email_verified/emailVerified on User is consistently named email_verified.
provider_id/providerId renamed to provider on Account
provider_type/providerType renamed to type on Account
provider_account_id/providerAccountId on Account is consistently named providerAccountId
access_token_expires/accessTokenExpires on Account renamed to expires_in
New fields on Account: expires_at, token_type, scope, id_token, session_state
verification_requests table has been renamed to verification_tokens
Complete new schema in:
https://next-auth.js.org/adapters/prisma
I am trying to deploy a next.js (ssr) application in AWS' Amplify using the CDK but Amplify fails to identify the app as next.js ssr. When I do it manually though, using AWS UI, app is identified as SSR and works as expected.
This is generated by aws-cdk/aws-amplify v118 as:
import * as cdk from '#aws-cdk/core';
import * as amplify from '#aws-cdk/aws-amplify';
import codebuild = require('#aws-cdk/aws-codebuild');
export class AmplifyStack extends cdk.Stack {
constructor(scope: cdk.Construct, id: string, props: cdk.StackProps) {
super(scope, id, props);
const sourceCodeProvider = new amplify.GitHubSourceCodeProvider({
owner: '.....',
repository: '....',
oauthToken: cdk.SecretValue.secretsManager('github-token'),
});
const buildSpec = codebuild.BuildSpec.fromObjectToYaml(
{
version: 1,
applications: [
{
frontend: {
phases: {
preBuild: {
commands: [
"npm install"
]
},
build: {
commands: [
"npm run build"
]
}
},
artifacts: {
baseDirectory: ".next",
files: [
"**/*"
]
},
cache: {
paths: [
"node_modules/**/*"
]
}
}
}
]
}
);
const amplifyApp = new amplify.App(this, "cdk-nf-web-app", {
sourceCodeProvider: sourceCodeProvider,
buildSpec: buildSpec
});
amplifyApp.addBranch('develop', {
basicAuth: amplify.BasicAuth.fromGeneratedPassword('dev')
});
amplifyApp.addCustomRule({
source: "</^[^.]+$|\\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>",
target: "/index.html",
status: amplify.RedirectStatus.REWRITE
});
}
}
Which is identical to what AWS has generated when I do it manually from UI. The difference here is the lack of Framework identification as shown in picture. Any ideas?
To answer my own question, I was missing the role as without it aws won't create the necessary resources. (role: https://docs.aws.amazon.com/cdk/api/latest/docs/aws-iam-readme.html)
Edit to elaborate on how i fixed it:
Added a new role that can be used by amplify
const role = new iam.Role(this, 'amplify-role-webapp-'+props.environment, {
assumedBy: new iam.ServicePrincipal('amplify.amazonaws.com'),
description: 'Custom role permitting resources creation from Amplify',
});
and assigned a policy (AdministratorAccess) that role
let iManagedPolicy = iam.ManagedPolicy.fromAwsManagedPolicyName(
'AdministratorAccess',
);
role.addManagedPolicy(iManagedPolicy)
Then upon creating the app, i assigned the role to the app:
const amplifyApp = new amplify.App(this, "cdk-nf-web-app", {
sourceCodeProvider: sourceCodeProvider,
buildSpec: buildSpec,
role: role <--- this line here
});
The amplify app requires authorisation to create the relevant resources:
// This is for demonstrations purposes only; Do not give full access for production usage!
amplifyApp.grantPrincipal.addToPrincipalPolicy(new iam.PolicyStatement({
resources: ["*"],
actions: ['*'],
}))
Source Code Showcase