BabaYaga Comments - Answer Overflow

I'm using Credential Provider, but you might have to change it to Github and remove the pages section and the jwt callback as well, cuz you might (in my opinion, you should) use database session strategy.

20 replies

TTCTheo's Typesafe Cult

•Created by aditya on 3/31/2023 in #questions

Role bases authentication with Github Provider using next auth

and then modify the Next Auth Options like this:

export const authOptions: NextAuthOptions = {
  secret: env.NEXTAUTH_SECRET,
  adapter: PrismaAdapter(prisma),
  providers: [
    CredentialsProvider({
      name: "Credentials",
      type: "credentials",
      credentials: {},
      async authorize(credentials) {
        // SOME LOGIC TO IDENTIFY THE USER IN THE DATABASE
      },
    }),
  ],
  pages: {
    signIn: "/auth/login",
  },
  session: {
    strategy: "jwt",
  },
  callbacks: {
    session({ session, token }) {
      if (session.user && token.sub) {
        session.user.id = token.sub;
        session.user.role = token.role;
      }
      return session;
    },
    jwt({ token, user }) {
      if (user) {
        token = {
          ...token,
          role: user.role,
        };
      }
      return token;
    },
  },
};

export const authOptions: NextAuthOptions = {
  secret: env.NEXTAUTH_SECRET,
  adapter: PrismaAdapter(prisma),
  providers: [
    CredentialsProvider({
      name: "Credentials",
      type: "credentials",
      credentials: {},
      async authorize(credentials) {
        // SOME LOGIC TO IDENTIFY THE USER IN THE DATABASE
      },
    }),
  ],
  pages: {
    signIn: "/auth/login",
  },
  session: {
    strategy: "jwt",
  },
  callbacks: {
    session({ session, token }) {
      if (session.user && token.sub) {
        session.user.id = token.sub;
        session.user.role = token.role;
      }
      return session;
    },
    jwt({ token, user }) {
      if (user) {
        token = {
          ...token,
          role: user.role,
        };
      }
      return token;
    },
  },
};

20 replies

TTCTheo's Typesafe Cult

•Created by aditya on 3/31/2023 in #questions

Role bases authentication with Github Provider using next auth

To add Roles, You first need to modify the User Model (considering you're using Prisma), you can do that by adding a role String @default("USER") to User Mode.

20 replies

TTCTheo's Typesafe Cult

•Created by BabaYaga on 3/25/2023 in #questions

Using Mantine instead of Tailwind gives useInsertionEffect Error

Okay, after fighting it for than 2 days, I got what's causing the issue. It's trpc's serverside rendering.

import { httpBatchLink, loggerLink } from "@trpc/client";
import { createTRPCNext } from "@trpc/next";
import { type inferRouterInputs, type inferRouterOutputs } from "@trpc/server";
import superjson from "superjson";

import { type AppRouter } from "@/server/api/root";

const getBaseUrl = () => {
  if (typeof window !== "undefined") return ""; // browser should use relative url
  if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`; // SSR should use vercel url
  return `http://localhost:${process.env.PORT ?? 3000}`; // dev SSR should use localhost
};

export const api = createTRPCNext<AppRouter>({
  config() {
    return {
      transformer: superjson,
      links: [
        loggerLink({
          enabled: (opts) =>
            process.env.NODE_ENV === "development" ||
            (opts.direction === "down" && opts.result instanceof Error),
        }),
        httpBatchLink({
          url: `${getBaseUrl()}/api/trpc`,
        }),
      ],
    };
  },
  ssr: false,
});

export type RouterInputs = inferRouterInputs<AppRouter>;
export type RouterOutputs = inferRouterOutputs<AppRouter>;

import { httpBatchLink, loggerLink } from "@trpc/client";
import { createTRPCNext } from "@trpc/next";
import { type inferRouterInputs, type inferRouterOutputs } from "@trpc/server";
import superjson from "superjson";

import { type AppRouter } from "@/server/api/root";

const getBaseUrl = () => {
  if (typeof window !== "undefined") return ""; // browser should use relative url
  if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`; // SSR should use vercel url
  return `http://localhost:${process.env.PORT ?? 3000}`; // dev SSR should use localhost
};

export const api = createTRPCNext<AppRouter>({
  config() {
    return {
      transformer: superjson,
      links: [
        loggerLink({
          enabled: (opts) =>
            process.env.NODE_ENV === "development" ||
            (opts.direction === "down" && opts.result instanceof Error),
        }),
        httpBatchLink({
          url: `${getBaseUrl()}/api/trpc`,
        }),
      ],
    };
  },
  ssr: false,
});

export type RouterInputs = inferRouterInputs<AppRouter>;
export type RouterOutputs = inferRouterOutputs<AppRouter>;

Previously, (and also generally), I turn that ssr: false to true and this was the whole thing which was causing the error

5 replies

TTCTheo's Typesafe Cult

•Created by BabaYaga on 3/25/2023 in #questions

Using Mantine instead of Tailwind gives useInsertionEffect Error

I surely did... I won't ask a question without going through mantine docs

5 replies

TTCTheo's Typesafe Cult

•Created by BabaYaga on 1/28/2023 in #questions

Failed to load next.config.mjs

I tried deleting my node_modules and Reinstalling Node, But it is still giving me the same error

2 replies

Gaming

Programming