BigLung Posts - Answer Overflow

BigLung

Explore posts from servers

•Created by BigLung on 4/26/2024 in #questions

NextAuth - Email Provider Breaking Google Provider!

Howdy, Some users of my app (app.getriver.io) started reporting not being able to log in to our app. We tested and figured out that some people who originally signed up with email + magic link are then trying to sign in with google (but connected to the same email they originally authenticated with) Is it possible to intercept login attempts like this so that you can interchangably login with email or google for the same email? If not, how do I intercept this and display some sort of warning when someone tries to auth with a google account that already has an account associated with the same email?

5 replies

TTCTheo's Typesafe Cult

•Created by BigLung on 12/8/2023 in #questions

Profiling T3 API?

Howdy, Does anyone have recommendations on how to do performance profiling for your T3 api's? I have some routes that are running particularly slow, want to optimize them and figure out which parts of these routes are causing the biggest slowdowns. Just pointing me towards tools / guides, I just have no idea where to start 🤣

2 replies

TTCTheo's Typesafe Cult

•Created by BigLung on 9/27/2023 in #questions

updates to tailwind.config.ts not applying?

I have updated my tailwind.config.ts to set new theme colors all colors in the app used this definition for theme colors Unfortunately despite recloning the repo multiple times, nuking node modules, rebooting my pc. Everything I can think of for any sort of cached results, the colors are not updating... I have no manually specficied any colors in the app, everything is stuff like

className="bg-primary" // etc

className="bg-primary" // etc

Additionally, I don't have any colors defined in my globals.css file either... I have no idea how this is happening 😭

3 replies

TTCTheo's Typesafe Cult

•Created by BigLung on 9/14/2023 in #questions

Microsoft Login W T3

2 replies

TTCTheo's Typesafe Cult

•Created by BigLung on 9/5/2023 in #questions

Guide to extending t3 template?

Howdy! I love t3 and have been using it for months here at my job. The thing I was wondering about is if there is any information on extending the t3-starter template on my own fork. I would basically like to make a custom version of t3 with some different defaults / packages installed on my fork. But I genuinely have no idea how t3 was made / where to get started. Has anyone documented their journey doing a similar thing?

4 replies

TTCTheo's Typesafe Cult

•Created by BigLung on 8/25/2023 in #questions

Twitter link previews with t3?

Hey gang, Andrew with river here. I am trying to setup link previews for some of the routes in our application, the open graph link previews are working (ex: https://app.getriver.io/events), but they do not work for twitter links (following the documentation)

import Head from "next/head";

type MetaTagsProps = {
  title: string;
  description: string;
  route: string;
  image?: string;
};

const MetaTags = (props: MetaTagsProps) => {
  const host =
    process.env.NODE_ENV === "production"
      ? "https://app.getriver.io"
      : "http://localhost:3000";
  const image = `${host}/Icon_Neon%20Green.png`;
  const url = `${host}${props.route}`;

  console.log("META TAGS", props, "IMAGE", props.image ?? image);
  return (
    <Head>
      {/* Twitter */}
      <meta name="twitter:card" content="summary" />
      <meta name="twitter:title" content={props.title} />
      <meta name="twitter:description" content={props.description} />
      <meta name="twitter:image" content={image} />

      {/* Open Graph */}
      <meta property="og:title" content={props.title} />
      <meta property="og:description" content={props.description} />
      <meta property="og:image" content={props.image ?? image} />
      <meta property="og:url" content={url} />
      <meta property="og:type" content="website" />
    </Head>
  );
};

export default MetaTags;

import Head from "next/head";

type MetaTagsProps = {
  title: string;
  description: string;
  route: string;
  image?: string;
};

const MetaTags = (props: MetaTagsProps) => {
  const host =
    process.env.NODE_ENV === "production"
      ? "https://app.getriver.io"
      : "http://localhost:3000";
  const image = `${host}/Icon_Neon%20Green.png`;
  const url = `${host}${props.route}`;

  console.log("META TAGS", props, "IMAGE", props.image ?? image);
  return (
    <Head>
      {/* Twitter */}
      <meta name="twitter:card" content="summary" />
      <meta name="twitter:title" content={props.title} />
      <meta name="twitter:description" content={props.description} />
      <meta name="twitter:image" content={image} />

      {/* Open Graph */}
      <meta property="og:title" content={props.title} />
      <meta property="og:description" content={props.description} />
      <meta property="og:image" content={props.image ?? image} />
      <meta property="og:url" content={url} />
      <meta property="og:type" content="website" />
    </Head>
  );
};

export default MetaTags;

This is the component I am using. Link previews work for everything except twitter... 🤔 Anyone had problems or experience with this?

9 replies

TTCTheo's Typesafe Cult

•Created by BigLung on 8/11/2023 in #questions

Sentry TRPC config not working

I followed this guide on integrating sentry into a t3 app (both frontend and backend) https://github.com/getsentry/sentry-javascript/discussions/8500 My frontend errors are properly getting caught, but sentry is not intercepting my backend errors. Does anyone have any ideas on how to progress? I would love for sentry to just automatically catch all errors originating from my trpc routes

4 replies

TTCTheo's Typesafe Cult

•Created by BigLung on 7/12/2023 in #questions

Custom protected routes?

Hey guys I'm wondering about the best way to achieve something. I added a custom property to my User table which is ROLE Role can be USER, ADMIN, or SUPER_ADMIN I want to gate a route /admin and all of its potential future subroutes behind a check to ensure someones role is ADMIN.

const Admin = () => {
  const { data: sessionData } = useSession();

  const { data: isAdmin, isLoading: isAdminLoading } =
    api.user.isAdmin.useQuery(
      {
        userId: sessionData?.user?.id as string,
      },
      {
        enabled: sessionData?.user !== undefined,
      }
    );

  if (!isAdmin)
    return (
      <div>
        <H1>You are not authorized to view this page</H1>
      </div>
    );

  return <div>Admin</div>;
};

export default Admin;

const Admin = () => {
  const { data: sessionData } = useSession();

  const { data: isAdmin, isLoading: isAdminLoading } =
    api.user.isAdmin.useQuery(
      {
        userId: sessionData?.user?.id as string,
      },
      {
        enabled: sessionData?.user !== undefined,
      }
    );

  if (!isAdmin)
    return (
      <div>
        <H1>You are not authorized to view this page</H1>
      </div>
    );

  return <div>Admin</div>;
};

export default Admin;

  isAdmin: publicProcedure
    .input(
      z.object({
        userId: z.string(),
      })
    )
    .query(async ({ ctx, input }): Promise<boolean> => {
      return await ctx.prisma.user
        .findUnique({
          where: {
            id: input.userId,
          },
        })
        .then((user) => {
          if (user?.role === "ADMIN") return true;
          return false;
        });
    }),

  isAdmin: publicProcedure
    .input(
      z.object({
        userId: z.string(),
      })
    )
    .query(async ({ ctx, input }): Promise<boolean> => {
      return await ctx.prisma.user
        .findUnique({
          where: {
            id: input.userId,
          },
        })
        .then((user) => {
          if (user?.role === "ADMIN") return true;
          return false;
        });
    }),

I was adding this to each page but this seems obtuse / incorrect. Is there a better way to gate entire routes behind custom checks than what I am doing here?

30 replies

TTCTheo's Typesafe Cult

•Created by BigLung on 4/14/2023 in #questions

Incomprehensible build failures

Howdy yall, pretty new to vercel / t3 stack here. I am getting a build failure on my new t3 app that I can't make heads or tails of. The build output is as attached. Has anyone seen anything like this before? Do you have any suggestions for unblocking this build failure?

19 replies

TTCTheo's Typesafe Cult

•Created by BigLung on 3/29/2023 in #questions

Weird default / route /en redirect behavior?

Can someone explain to me why navigating to localhost:3000 Is always redirecting me to localhost:3000/en/home? I had tried setting up a redirect in the next.config.mjs but removed it and recompiled This is my next.config.mjs if this helps.

// @ts-check

/**
 * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation.
 * This is especially useful for Docker builds.
 */
!process.env.SKIP_ENV_VALIDATION && (await import("./src/env.mjs"));

/** @type {import("next").NextConfig} */
const config = {
  reactStrictMode: true,

  /**
   * If you have the "experimental: { appDir: true }" setting enabled, then you
   * must comment the below `i18n` config out.
   *
   * @see https://github.com/vercel/next.js/issues/41980
   */
  i18n: {
    locales: ["en"],
    defaultLocale: "en",
  },
};
export default config;

// @ts-check

/**
 * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation.
 * This is especially useful for Docker builds.
 */
!process.env.SKIP_ENV_VALIDATION && (await import("./src/env.mjs"));

/** @type {import("next").NextConfig} */
const config = {
  reactStrictMode: true,

  /**
   * If you have the "experimental: { appDir: true }" setting enabled, then you
   * must comment the below `i18n` config out.
   *
   * @see https://github.com/vercel/next.js/issues/41980
   */
  i18n: {
    locales: ["en"],
    defaultLocale: "en",
  },
};
export default config;

3 replies

Gaming

Programming