Edit default sign in form

Hello, I just want to know how to edit this form:

Solution:

This error is cause you’re missing a NEXTAuTH_SECRET

21 Replies

julius•2y ago

You cant really edit the default one (theres some theming option but its limited), but you can make a custom one https://next-auth.js.org/configuration/pages

Pages | NextAuth.js

NextAuth.js automatically creates simple, unbranded authentication pages for handling Sign in, Sign out, Email Verification and displaying error messages.

wailroth•2y ago

oh okay so it dont depend from t3

julius•2y ago

No - were not doing anything custom there

wailroth•2y ago

ok thanks, and an another question how do you make that the user is redirected when he's not logged in ?

"use client"
import '../src/styles/globals.css'

import Nav from './nav';
import { ReactNode, Suspense } from 'react';
import { SessionProvider, getSession } from 'next-auth/react';
import { redirect } from 'next/navigation';

interface IProps {
  children: ReactNode;
}


export default async function RootLayout({ children }: IProps) {

  const session = await getSession()
  const user = await session?.user

  if (!user) {
    redirect("/api/auth/signin")
  }

  return (
    <html lang="en" className="h-full bg-gray-50">
      <body className="h-full">

        <SessionProvider>
          <Suspense fallback="Loading">
            {/* @ts-expect-error Server Component */}
            <Nav />
          </Suspense>
          {children}
        </SessionProvider>


      </body>
    </html>
  );
}

"use client"
import '../src/styles/globals.css'

import Nav from './nav';
import { ReactNode, Suspense } from 'react';
import { SessionProvider, getSession } from 'next-auth/react';
import { redirect } from 'next/navigation';

interface IProps {
  children: ReactNode;
}


export default async function RootLayout({ children }: IProps) {

  const session = await getSession()
  const user = await session?.user

  if (!user) {
    redirect("/api/auth/signin")
  }

  return (
    <html lang="en" className="h-full bg-gray-50">
      <body className="h-full">

        <SessionProvider>
          <Suspense fallback="Loading">
            {/* @ts-expect-error Server Component */}
            <Nav />
          </Suspense>
          {children}
        </SessionProvider>


      </body>
    </html>
  );
}

I did that but it always redirect me

julius•2y ago

You should use getServerSession there

wailroth•2y ago

why ? (for understand and not do the same mistake) (then I get that: getServerSession is used in a React Server Component.)

julius•2y ago

a) it is the one thet they have ported to appRouter b) getSession is a client side hook that triggers unnecesdary fetches if fired from server

wailroth•2y ago

I think I need to understand better how to use it because I put "use client" at the top

julius•2y ago

Oh - my bad. But you shouldnt have use client on layouts Just remove the use client here

wailroth•2y ago

Yeah but a got an error with the session provider

        <SessionProvider>
          <Suspense fallback="Loading">
            {/* @ts-expect-error Server Component */}
            <Nav />
          </Suspense>
          {children}
        </SessionProvider>

        <SessionProvider>
          <Suspense fallback="Loading">
            {/* @ts-expect-error Server Component */}
            <Nav />
          </Suspense>
          {children}
        </SessionProvider>

julius•2y ago

Create a wrapper for it (that’s use client) and use that

wailroth•2y ago

Okay, I need to check how to do it so

julius•2y ago

// app/session-provider
"use client";
import { SessionProvider as _SessionProvider } from "next-auth"

export const SessionProvider = $SessionProvider

// app/layout.ts
import { SessionProvider } from "./session-provider";

...

// app/session-provider
"use client";
import { SessionProvider as _SessionProvider } from "next-auth"

export const SessionProvider = $SessionProvider

// app/layout.ts
import { SessionProvider } from "./session-provider";

...

you'll need to do that for quite a few lib that hasn't yet put the directive in their code but with time libs will do that for you https://github.com/juliusmarminge/jumr.dev/blob/main/app/use-client.tsx i have a file like that that exports stuff like that wrapped with use client

wailroth•2y ago

oh okay hummm Idk if it has a link

https://next-auth.js.org/errors#jwt_session_error Invalid Compact JWE {
  message: 'Invalid Compact JWE',
  stack: 'JWEInvalid: Invalid Compact JWE\n' +
    '    at compactDecrypt (webpack-internal:///(sc_server)/./node_modules/jose/dist/node/esm/jwe/compact/decrypt.js:20:15)\n' +
    '    at jwtDecrypt (webpack-internal:///(sc_server)/./node_modules/jose/dist/node/esm/jwt/decrypt.js:12:100)\n' +
    '    at Object.decode (webpack-internal:///(sc_server)/./node_modules/next-auth/jwt/index.js:44:53)\n' +
    '    at async Object.session (webpack-internal:///(sc_server)/./node_modules/next-auth/core/routes/session.js:25:34)\n' +
    '    at async AuthHandler (webpack-internal:///(sc_server)/./node_modules/next-auth/core/index.js:161:37)\n' +
    '    at async getServerSession (webpack-internal:///(sc_server)/./node_modules/next-auth/next/index.js:129:21)\n' +
    '    at async RootLayout (webpack-internal:///(sc_server)/./app/layout.tsx:23:21)',
  name: 'JWEInvalid'
}

https://next-auth.js.org/errors#jwt_session_error Invalid Compact JWE {
  message: 'Invalid Compact JWE',
  stack: 'JWEInvalid: Invalid Compact JWE\n' +
    '    at compactDecrypt (webpack-internal:///(sc_server)/./node_modules/jose/dist/node/esm/jwe/compact/decrypt.js:20:15)\n' +
    '    at jwtDecrypt (webpack-internal:///(sc_server)/./node_modules/jose/dist/node/esm/jwt/decrypt.js:12:100)\n' +
    '    at Object.decode (webpack-internal:///(sc_server)/./node_modules/next-auth/jwt/index.js:44:53)\n' +
    '    at async Object.session (webpack-internal:///(sc_server)/./node_modules/next-auth/core/routes/session.js:25:34)\n' +
    '    at async AuthHandler (webpack-internal:///(sc_server)/./node_modules/next-auth/core/index.js:161:37)\n' +
    '    at async getServerSession (webpack-internal:///(sc_server)/./node_modules/next-auth/next/index.js:129:21)\n' +
    '    at async RootLayout (webpack-internal:///(sc_server)/./app/layout.tsx:23:21)',
  name: 'JWEInvalid'
}

from this modification on login I broke something with my session provider Every session is null now

"use client";
import { SessionProvider as _SessionProvider } from "next-auth/react"
export const SessionProvider = _SessionProvider

"use client";
import { SessionProvider as _SessionProvider } from "next-auth/react"
export const SessionProvider = _SessionProvider

I did something bad ?

Solution

julius•2y ago

This error is cause you’re missing a NEXTAuTH_SECRET

wailroth•2y ago

Everything work when I use the ""real"" sessionprovider

wailroth•2y ago

wailroth•2y ago

only when I want to access to getServerSession

54•2y ago

The key has to be put in quotation marks

wailroth•2y ago

thanks but same error btw next time i'll rtd okay so I dont have this error anymore but my session provider still "doesn't work"; it was like I have no session in other pages Thank for all guys, everething is working now

Gaming

Programming

Edit default sign in form