Correct way of consuming TRPC NextAuth context with 'use client' useRouter

Answered

Prairie yellowjacket posted this in #help-forum

Prairie yellowjacketOP

2024-01-17T15:28:16.000Z

Hi, I have made a header component /_comp.../Header.tsx that has pathname route logic this requires 'use client' however, I have a sign in function that consume the TRPC context via next auth getServerAuthSession(), due to the 'use client' we now get.
Error: âŒ Attempted to access a server-side environment variable on the client
partly due to the prisma server tring to validate the user logic
what's the best way around this, client/server logic?

Answered by Ray

1. you should use metadata api for the header in app router instead of next/head
2 we can render the server component with the children props in client component

View full answer

20 Replies

@Prairie yellowjacket Hi, I have made a header component /_comp.../Header.tsx that has pathname route logic this requires 'use client' however, I have a sign in function that consume the TRPC context via next auth getServerAuthSession(), due to the 'use client' we now get. Error: âŒ Attempted to access a server-side environment variable on the client partly due to the prisma server tring to validate the user logic what's the best way around this, client/server logic?

Ray

2024-01-17T15:57:10.000Z

turn the sign in function to server action so we can handle it on server side

Prairie yellowjacketOP

2024-01-17T16:01:53.000Z

so break out the header function ?

header.tsx
'use client'

import signinhelper.tsx
-consume rout logic
-consume signinhelper


signinhelper.tsx
'use server'
-consume getServerAuthSession()

@Prairie yellowjacket so break out the header function ? header.tsx 'use client' import signinhelper.tsx -consume rout logic -consume signinhelper signinhelper.tsx 'use server' -consume getServerAuthSession()

Ray

2024-01-17T16:04:01.000Z

header.tsx
'use client'

import signinhelper.tsx
-consume rout logic
-consume signinhelper


signinhelper.tsx
'use server'
-consume signin()

Prairie yellowjacketOP

2024-01-17T16:16:49.000Z

hmm, a bug? so we have some psuedo 'use client' ('use server' (async getServerAuthSession())

1 of 1 unhandled error
Next.js is up to date

Unhandled Runtime Error
Error: async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding `'use client'` to a module that was originally written for the server.

@Prairie yellowjacket hmm, a bug? so we have some psuedo 'use client' ('use server' (async getServerAuthSession()) 1 of 1 unhandled error Next.js is up to date Unhandled Runtime Error Error: async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding `'use client'` to a module that was originally written for the server.

Ray

2024-01-17T16:17:48.000Z

could you show the code

Prairie yellowjacketOP

2024-01-17T16:17:56.000Z

sure

src/app/page.tsx
import type { NextPage } from "next";
import Head from "next/head";
import { unstable_noStore as noStore } from "next/cache";
import Header from "./_components/Header";


const Home: NextPage = async () => {
  noStore();
  return (
    <>
      <Head>
        <title>Create T3 App</title>
        <meta name="description" content="Generated by create-t3-app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <div className="flex min-h-screen flex-col  text-black">
        <Header />
      </div>
    </>
  );
};

export default Home;

_components/Header.tsx
'use client'
import React from "react";
import Link from "next/link";
import { usePathname } from 'next/navigation'
import SignInHelper from "./signinhelper";

const links = [
  { href: "/jobs", label: "Job Seekers" },
  { href: "/jobs/create", label: "Post a Job" },
  { href: "#", label: "About Us" },
  { href: "#", label: "Contact" },
  { href: "conference", label: "Conferences" },
];

export default function Header() {
    const pathname = usePathname()
 

  return (
    <header className="mx-4 flex h-16 items-center bg-[#ffffff] px-4  md:mx-8 lg:mx-16 lg:px-6">
      <Link className="flex items-center justify-center" href="/">
        <span className="ml-2 text-lg font-bold">MatchPoint</span>
      </Link>
      <nav className="ml-auto flex items-center gap-4 sm:gap-6">
        {links.map((link, index) => (
          <Link
            key={index}
            className={`text-sm font-medium underline-offset-4 hover:underline ${pathname === link.href ? "text-gray-500" : ""}`}
            href={link.href}
          >
            {link.label}
          </Link>
        ))}
        <SignInHelper />
      </nav>
    </header>
  );
};

src/app/_components/signinhelper.tsx
'use server'
import React from "react";
import Link from "next/link";

import { getServerAuthSession } from "~/server/auth";

export default async function SignInHelper() {
    const session = await getServerAuthSession();
  
    return (
      <>
        <Link href={session ? "/api/auth/signout" : "/api/auth/signin"}>
          <div className="rounded-full bg-white/10 px-10 py-3 font-semibold no-underline transition hover:bg-white/20">
            {session ? "Sign out" : "Sign in"}
          </div>
        </Link>
      </>
    );
  }

this is project from
pnpm create t3-app@latest from
https://github.com/t3-oss/create-t3-app

Ray

2024-01-17T16:51:40.000Z

ok a few problem here

@Prairie yellowjacket src/app/_components/signinhelper.tsx 'use server' import React from "react"; import Link from "next/link"; import { getServerAuthSession } from "~/server/auth"; export default async function SignInHelper() { const session = await getServerAuthSession(); return ( <> <Link href={session ? "/api/auth/signout" : "/api/auth/signin"}> <div className="rounded-full bg-white/10 px-10 py-3 font-semibold no-underline transition hover:bg-white/20"> {session ? "Sign out" : "Sign in"} </div> </Link> </> ); }

Ray

2024-01-17T16:54:07.000Z

import {type Metadata} from 'next'
import { unstable_noStore as noStore } from "next/cache";
import Header from "./_components/Header";

export const metadata: Metadata = {
    title: 'Create T3 App',
    description: 'Generated by create-t3-app'
}

const Home = async () => {
  noStore();
  return (
    <>
      <div className="flex min-h-screen flex-col  text-black">
        <Header>
            <SignInHelper />
        </Header>
      </div>
    </>
  );
};

export default Home;


'use client'
import React from "react";
import Link from "next/link";
import { usePathname } from 'next/navigation'

const links = [
  { href: "/jobs", label: "Job Seekers" },
  { href: "/jobs/create", label: "Post a Job" },
  { href: "#", label: "About Us" },
  { href: "#", label: "Contact" },
  { href: "conference", label: "Conferences" },
];

export default function Header({children}) {
    const pathname = usePathname()
 

  return (
    <header className="mx-4 flex h-16 items-center bg-[#ffffff] px-4  md:mx-8 lg:mx-16 lg:px-6">
      <Link className="flex items-center justify-center" href="/">
        <span className="ml-2 text-lg font-bold">MatchPoint</span>
      </Link>
      <nav className="ml-auto flex items-center gap-4 sm:gap-6">
        {links.map((link, index) => (
          <Link
            key={index}
            className={`text-sm font-medium underline-offset-4 hover:underline ${pathname === link.href ? "text-gray-500" : ""}`}
            href={link.href}
          >
            {link.label}
          </Link>
        ))}
        {children}
      </nav>
    </header>
  );
};


import Link from "next/link";

import { getServerAuthSession } from "~/server/auth";

export default async function SignInHelper() {
    const session = await getServerAuthSession();
  
    return (
      <>
        <Link href={session ? "/api/auth/signout" : "/api/auth/signin"}>
          <div className="rounded-full bg-white/10 px-10 py-3 font-semibold no-underline transition hover:bg-white/20">
            {session ? "Sign out" : "Sign in"}
          </div>
        </Link>
      </>
    );
  }

Ray

2024-01-17T16:55:12.000Z

1. you should use metadata api for the header in app router instead of next/head
2 we can render the server component with the children props in client component

Answer

Prairie yellowjacketOP

2024-01-17T16:59:26.000Z

ok so you have brought the signinhelper 'use server' above the 'use client' and set it as a child. will give this a go

@Prairie yellowjacket ok so you have brought the signinhelper 'use server' above the 'use client' and set it as a child. will give this a go

Ray

2024-01-17T17:00:32.000Z

you don't need server action in this case, I thought you had a sign in function for it

Prairie yellowjacketOP

2024-01-17T17:09:37.000Z

yes, this has worked. (I had to drop some of the default s for the functions as it was giving some undefined erorr)
for others that tread this path
see working example here
https://github.com/SkippyHub/nextauth-nextrouting-client-server

Thanks Ray.

we might have found a bug about using the server actions.
as in psuedo 'use client' ('use server' (async server action())

@Prairie yellowjacket Thanks Ray. we might have found a bug about using the server actions. as in psuedo 'use client' ('use server' (async server action())

Ray

2024-01-17T17:13:37.000Z

no it is not bug, we can't turn a client component to server component with 'use server'

Prairie yellowjacketOP

2024-01-17T17:16:29.000Z

okay, thanks for help and clearign that up

@Prairie yellowjacket okay, thanks for help and clearign that up

Ray

2024-01-17T17:17:08.000Z

your welcome