Nextjs 13 Providers

[limpid void]

Anyone got a clue how or where you use providers/context in the new app folder routes?

[rugged lance]

I was wondering the same thing. Did you try to put them inside page.tsx ?

[crimson oxide]

You can create a client component that has a context provider and import it in a server component.

For example:

AuthContext.tsx

'use client';

import { SessionProvider } from 'next-auth/react';

export interface AuthContextProps {
    children: React.ReactNode;
}

export default function AuthContext({ children }: AuthContextProps) {
    return <SessionProvider>{children}</SessionProvider>;
}

/app/layout.tsx

import Link from 'next/link';
import React, from 'react';
import AuthContext from 'src/app/AuthContext';
import '../styles/globals.css';

const RootLayout: React.FC<{ children: React.ReactNode }> = ({
    children,
}) => {
    return (
        <div className="text-white">
           <span> Hello from server land!</span>
            <AuthContext>{children}</AuthContext>
        </div>
    );
};

export default RootLayout;

This is an example with next-auth's Session Provider

[near tapir]

We're trying this right now and it's not working for us

we're getting TypeError: (0 , react_1.createContext) is not a function

[crimson oxide]

make sure you add "use client";, and if you already did that, try deleting the .next folder

happened to me as well, and fixed it by deleting it

[dapper geyser]

so how can i pass session prop to SessionProvider? there's no _app.ts

[crimson oxide]

I'm trying to get this to work yet. I created a getSession function that calls http://localhost:3000/api/auth/session to fetch the session and then pass it to AuthContext via props, and then to SessionProvier, but I can't get it to work

[dapper geyser]

Same, if you get any solutions please inform us.

[crimson oxide]

That's where I'm at, but doesn't seem to work

[dapper geyser]

It's perfect but in this case I can't use useSession

[crimson oxide]

Even after I login

useSession is in a client component

this is the layout.tsx

[dapper geyser]

i checked next-auth source, they use cookies and header so i think a little patch in this version will be ok

[crimson oxide]

yeah, they'll probably patch it soon, so we'll just wait

[limpid void]

thanks guys been trying to figure this out for most of today could really do with the next team giving us an example project that makes use of context etc