Next.js Discord

Discord Forum

How can i mix these two provider setups with eachother?

Unanswered
Asiatic Lion posted this in #help-forum
Open in Discord
Asiatic LionOP
I'm trying to learn next-auth and here is a example to add to providers, But i already have nextui providers settled and i want to use next-auth providers beside nextui
Here is the code i'm trying to mix :
import type { AppProps } from 'next/app'
import { SessionProvider } from 'next-auth/react';
function MyApp({ Component, pageProps }: AppProps) {
  return (<SessionProvider session={pageProps.session}>
           <Component {...pageProps} />
         </SessionProvider>);
}
export default MyApp



My nextui providers file : 
'use client'

import {NextUIProvider} from '@nextui-org/react'
import {ThemeProvider as NextThemesProvider} from "next-themes";
import {useRouter} from 'next/navigation'


export function Providers({children}: { children: React.ReactNode }) {
  const router = useRouter();
  return (
    <NextUIProvider navigate={router.push}>
      <NextThemesProvider attribute="class" defaultTheme="dark">
        {children}
      </NextThemesProvider>
    </NextUIProvider>
  )
}

38 Replies

Asiatic LionOP
Guys please answer me i never got an answer from any of you
Asiatic LionOP
bruh
and wrap the <Component/> with Providers
Pacific herring
https://youtu.be/PrdbyNYq-z4?si=uC-YkHhnn0Drlszh
@@ts-ignore Wrap the `children` with `SessionProvider`
Asiatic LionOP
how can i do this?
Pacific herring
this well detailed tutorial has everything you need to know about next auth as well
2 providers
just watch the tutorial
@Asiatic Lion how can i do this?
@ts-ignore
the same way you did with other 2 providers?
B33fb0n3
it's not that hard to stack multiple components in itself... :thinkaboutit:
@@ts-ignore the same way you did with other 2 providers?
Asiatic LionOP
changed to this
'use client'

import {NextUIProvider} from '@nextui-org/react'
import { ThemeProvider as NextThemesProvider } from 'next-themes';
import { SessionProvider } from 'next-auth/react';
import {useRouter} from 'next/navigation'
import type { AppProps } from 'next/app';


export function Providers({ Component, pageProps }: AppProps) {
  const router = useRouter();
  return (
    <NextUIProvider>
      <NextThemesProvider attribute="class" defaultTheme="dark">
        <SessionProvider session={pageProps.session}> 
          <Component {...pageProps} />
        </SessionProvider>
      </NextThemesProvider>
    </NextUIProvider>
  )
}
But getting error in : 
import { Inter } from "next/font/google";
import "./globals.css";
import { Providers } from "./providers";

const inter = Inter({ subsets: ["latin"] });

export const metadata = {
  title: "VC",
  description: "VCS",
};

interface RootLayoutProps {
  children: React.ReactNode;
}

export default function RootLayout({ children }: RootLayoutProps) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}
What i should do in <Providers>{children}</Providers>


Property 'pageProps' is missing in type '{ children: ReactNode; }' but required in type 'AppInitialProps<any>'.
Asiatic LionOP
@@ts-ignore
@Asiatic Lion <@510480545160101898>
@ts-ignore
I think you are trying to mismatch the pages and app router
this should help
@@ts-ignore I think you are trying to mismatch the pages and app router
Asiatic LionOP
@@ts-ignore I think i figured it out but i have a new problem :
app/api/auth/[…nextauth].ts :
import NextAuth from "next-auth"
import CredentialsProvider from "next-auth/providers/credentials"

export default NextAuth({
  providers: [
    CredentialsProvider({
      type: 'credentials',
      credentials: {},
      authorize(credentials, req) {
        const { email, password } = credentials as { email: string; password: string; };
        

        if (email !== 'alex@email.com' || password !== 'qqqqq') {
          console.log(email, password)
          throw new Error('Invalid credentials');
        }
      

        return { id: '1', name: 'Alex', email: 'alex@email.com' };
      }
    }),
  ],
  pages: {
    signIn: "/login",  
  },
  callbacks: {
    async signIn() {
      return '/admin'; 
    },
  }
})



app-index.js:35 [next-auth][error][CLIENT_FETCH_ERROR]
https://next-auth.js.org/errors#client_fetch_error Unexpected token '<', "<!DOCTYPE "... is not valid JSON
{error: {…}, url: '/api/auth/session', message: Unexpected token '<', "<!DOCTYPE "... is not valid JSON}

equest URL:
http://localhost:3000/api/auth/session
Request Method:
GET
Status Code:
404 Not Found
Remote Address:
[::1]:3000
Referrer Policy:
strict-origin-when-cross-origin
Why is it failing to redirect to /auth.session
Asiatic LionOP
@Pacific herring
B33fb0n3
do you ping all persons in this thread one after another? To resolve the issue you only need and apply the docs
B33fb0n3
and maybe also reading the errors. Because this error:
Property 'pageProps' is missing in type '{ children: ReactNode; }' but required in type 'AppInitialProps<any>'.
Is easily resolveable when reading it. And even I know that and I started learning typescript today lol
B33fb0n3
What i should do
seems like you don't, yeah..
Asiatic LionOP
I understand it but i want the solution for fixing it without removing anything
B33fb0n3
without modifying it is not resolveable lol
@B33fb0n3 > What i should do seems like you don't, yeah..
Asiatic LionOP
And if you are learning ts today then why are you being a jerk here?
You are not helping unlike others do and you are just making fun of me
B33fb0n3
I just trying to help. That what you wanted... help
@B33fb0n3 I just trying to help. That what you wanted... help
Asiatic LionOP
Which help? saying easy is help?
@Asiatic Lion You are not helping unlike others do and you are just making fun of me
B33fb0n3
I am telling you, that you should read the docs, that ORM Hopper already mentioned. I also told you, to take a look at the first error, if you want to rollback your code to that state and resolve it
B33fb0n3
Yea and for that I am telling you, that you should read the docs to resolve it. Take a look here: https://next-auth.js.org/providers/credentials
Btw: Types only define the schema and does not have any data
Pacific herring
if you watched the tutorial i've sent you wouldn't be in this thread looking for more help