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

22 messages · Page 1 of 1 (latest)

stray blade
#

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?

teal orioleBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

fringe zodiac
stray blade
#

so break out the header function ?

header.tsx
'use client'

import signinhelper.tsx
-consume rout logic
-consume signinhelper


signinhelper.tsx
'use server'
-consume getServerAuthSession()
fringe zodiac
stray blade
#

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.
fringe zodiac
stray blade
#

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>
      </>
    );
  }
fringe zodiac
#

ok a few problem here

fringe zodiac
# stray blade ``` src/app/_components/signinhelper.tsx 'use server' import React from "react";... 
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>
      </>
    );
  }
#
  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
stray blade
#

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

fringe zodiac
stray blade
#

Thanks Ray.

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

fringe zodiac
stray blade
#

okay, thanks for help and clearign that up

fringe zodiac