Forsto Comments - Answer Overflow

Forsto

Explore posts from servers

DIAdiscord.js - Imagine an app TtRPC TTCTheo's Typesafe Cult

Posts Comments

TTCTheo's Typesafe Cult

•Created by Forsto on 6/12/2023 in #questions

Best way to query data in NextJS App Dir.

i can just write prisma queries in the nextjs components right?

7 replies

TTCTheo's Typesafe Cult

•Created by Forsto on 5/31/2023 in #questions

tRPC invalid_type error with Clerk

The difference was in the clerk matcher and my matcher, as on match my middleware wouldn't preserve all url parameters. ended up fixing it like so:

if (hostname === "localhost:3000" || hostname === DEPLOYMENT_URL) {
      const newUrl = new URL(path, req.url);
      newUrl.search = url.search; // preserve the original query string
      return NextResponse.rewrite(newUrl);
    }

    // rewrite everything else to `/_labels/[site] dynamic route
    const newUrl = new URL(`/_labels/${currentHost}${path}`, req.url);
    newUrl.search = url.search; // preserve the original query string
    return NextResponse.rewrite(newUrl);

if (hostname === "localhost:3000" || hostname === DEPLOYMENT_URL) {
      const newUrl = new URL(path, req.url);
      newUrl.search = url.search; // preserve the original query string
      return NextResponse.rewrite(newUrl);
    }

    // rewrite everything else to `/_labels/[site] dynamic route
    const newUrl = new URL(`/_labels/${currentHost}${path}`, req.url);
    newUrl.search = url.search; // preserve the original query string
    return NextResponse.rewrite(newUrl);

3 replies

TTCTheo's Typesafe Cult

•Created by Forsto on 5/31/2023 in #questions

tRPC invalid_type error with Clerk

I suspect that the issue is in my weird middleware that is there to handle subdomains, but im not really sure:

import { NextResponse } from "next/server";
import { authMiddleware } from "@clerk/nextjs/server";

export const config = {
  matcher: ["/((?!.*\\..*|_next).*)", "/", "/(api|trpc)(.*)"],
};

export default authMiddleware({
  publicRoutes: ["/", "/api/(.*)", "_labels/(.*)"],
  beforeAuth: async (req) => {
    const url = req.nextUrl;

    const DEPLOYMENT_URL = "saas.demodrop.app";

    // Get hostname of request (e.g. demo.vercel.pub, demo.localhost:3000)
    const hostname = req.headers.get("host") || DEPLOYMENT_URL;

    // Get the pathname of the request (e.g. /, /about, /blog/first-post)
    const path = url.pathname;

    const currentHost =
      process.env.NODE_ENV === "production" && process.env.VERCEL === "1"
        ? hostname.replace(`.${DEPLOYMENT_URL}`, "")
        : hostname.replace(".localhost:3000", "");

    // rewrite root application to `/home` folder
    if (hostname === "localhost:3000" || hostname === DEPLOYMENT_URL) {
      return NextResponse.rewrite(new URL(path, req.url));
    }

    // rewrite everything else to `/_labels/[site] dynamic route
    return NextResponse.rewrite(
      new URL(`/_labels/${currentHost}${path}`, req.url),
    );
  },
});

import { NextResponse } from "next/server";
import { authMiddleware } from "@clerk/nextjs/server";

export const config = {
  matcher: ["/((?!.*\\..*|_next).*)", "/", "/(api|trpc)(.*)"],
};

export default authMiddleware({
  publicRoutes: ["/", "/api/(.*)", "_labels/(.*)"],
  beforeAuth: async (req) => {
    const url = req.nextUrl;

    const DEPLOYMENT_URL = "saas.demodrop.app";

    // Get hostname of request (e.g. demo.vercel.pub, demo.localhost:3000)
    const hostname = req.headers.get("host") || DEPLOYMENT_URL;

    // Get the pathname of the request (e.g. /, /about, /blog/first-post)
    const path = url.pathname;

    const currentHost =
      process.env.NODE_ENV === "production" && process.env.VERCEL === "1"
        ? hostname.replace(`.${DEPLOYMENT_URL}`, "")
        : hostname.replace(".localhost:3000", "");

    // rewrite root application to `/home` folder
    if (hostname === "localhost:3000" || hostname === DEPLOYMENT_URL) {
      return NextResponse.rewrite(new URL(path, req.url));
    }

    // rewrite everything else to `/_labels/[site] dynamic route
    return NextResponse.rewrite(
      new URL(`/_labels/${currentHost}${path}`, req.url),
    );
  },
});

I also don't get any type or lint errors. The error started occuring once i started migrating my application to Clerk. Any help would be much appreciated.

3 replies

TTCTheo's Typesafe Cult

•Created by Forsto on 2/2/2023 in #questions

Call tRPC from the Next.js API folder

oh thanks for the help 😄

6 replies

TTCTheo's Typesafe Cult

•Created by Forsto on 1/23/2023 in #questions

Issue with server.msj

thanks for the help the issue ended up being that i was importing the server env instead of the client one

6 replies

TTCTheo's Typesafe Cult

•Created by Forsto on 12/26/2022 in #questions

How to make a curve in CSS

Ohh really dope thanks

8 replies

TTCTheo's Typesafe Cult

•Created by Forsto on 12/1/2022 in #questions

Re fetch an enabled tRPC query.

i guess if i just do a normal await it returns loading or something

10 replies

TTCTheo's Typesafe Cult

•Created by Forsto on 12/1/2022 in #questions

Re fetch an enabled tRPC query.

thank you so much, it works

10 replies

TTCTheo's Typesafe Cult

•Created by Forsto on 12/1/2022 in #questions

Re fetch an enabled tRPC query.

well yeah but i also did this:

const createInvestor = trpc.admin.investors.createOne.useMutation();
  const getInvestors = trpc.admin.investors.findMany.useQuery(undefined, {
    enabled: false,
    refetchOnWindowFocus: true,
    refetchOnMount: true,
    refetchOnReconnect: true,
  });

  getInvestors.refetch();

<button
  onClick={async () => {
    await createInvestor.mutate({
      firstName,
      lastName,
      email,
    });

    await getInvestors.refetch()
  }}>
  Add User
</button>

const createInvestor = trpc.admin.investors.createOne.useMutation();
  const getInvestors = trpc.admin.investors.findMany.useQuery(undefined, {
    enabled: false,
    refetchOnWindowFocus: true,
    refetchOnMount: true,
    refetchOnReconnect: true,
  });

  getInvestors.refetch();

<button
  onClick={async () => {
    await createInvestor.mutate({
      firstName,
      lastName,
      email,
    });

    await getInvestors.refetch()
  }}>
  Add User
</button>

and this worked

10 replies

TTCTheo's Typesafe Cult

•Created by utdev on 11/27/2022 in #questions

Next Auth does not fire callback and set session hook?

are you sure that credentials work with Prisma adapter, because in my code it didnt work with prisma

47 replies

TTCTheo's Typesafe Cult

•Created by Forsto on 11/27/2022 in #questions

Does Prisma adapter work with credentials in NextAuth?

the user does get found in the db but the session doenst work

19 replies

TTCTheo's Typesafe Cult

•Created by Forsto on 11/27/2022 in #questions

Does Prisma adapter work with credentials in NextAuth?

this is my nextauth file, am I maybe missing something?

import NextAuth, { type NextAuthOptions } from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";
// Prisma adapter for NextAuth, optional and can be removed
import { PrismaAdapter } from "@next-auth/prisma-adapter";

import { env } from "../../../env/server.mjs";
import { prisma } from "../../../server/db/client";

export const authOptions: NextAuthOptions = {
  // Include user.id on session
  callbacks: {
    jwt: async ({ token, user }) => {
      if (user) {
        token.id = user.id;
      }

      return token;
    },
    session({ session, token }) {
      if (token && session.user) {
        session.user.id = token.id as string;
      }

      return session;
    },
  },
  adapter: PrismaAdapter(prisma),
  pages: {
    signIn: "/login",
  },
  providers: [
    CredentialsProvider({
      name: "credentials",
      credentials: {
        email: { type: "email" },
        password: { type: "password" },
      },
      async authorize(credentials, req) {
        const user = await prisma.user.findFirst({
          where: {
            email: credentials?.email,
            password: credentials?.password,
          },
        });

        console.log(user);

        if (user)
          return {
            id: user.id,
          };
        else return null;
      },
    }),
  ],
};

export default NextAuth(authOptions);

import NextAuth, { type NextAuthOptions } from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";
// Prisma adapter for NextAuth, optional and can be removed
import { PrismaAdapter } from "@next-auth/prisma-adapter";

import { env } from "../../../env/server.mjs";
import { prisma } from "../../../server/db/client";

export const authOptions: NextAuthOptions = {
  // Include user.id on session
  callbacks: {
    jwt: async ({ token, user }) => {
      if (user) {
        token.id = user.id;
      }

      return token;
    },
    session({ session, token }) {
      if (token && session.user) {
        session.user.id = token.id as string;
      }

      return session;
    },
  },
  adapter: PrismaAdapter(prisma),
  pages: {
    signIn: "/login",
  },
  providers: [
    CredentialsProvider({
      name: "credentials",
      credentials: {
        email: { type: "email" },
        password: { type: "password" },
      },
      async authorize(credentials, req) {
        const user = await prisma.user.findFirst({
          where: {
            email: credentials?.email,
            password: credentials?.password,
          },
        });

        console.log(user);

        if (user)
          return {
            id: user.id,
          };
        else return null;
      },
    }),
  ],
};

export default NextAuth(authOptions);

19 replies

TTCTheo's Typesafe Cult

•Created by Forsto on 11/27/2022 in #questions

Does Prisma adapter work with credentials in NextAuth?

hmm I looked at a lot of older threads and github repos but the session isnt working

19 replies

TTCTheo's Typesafe Cult

•Created by Forsto on 9/22/2022 in #questions

How do I use less bandwith?

oh didnt know webp video was a thing thought about making it a gif

8 replies

Gaming

Programming