jesse Posts - Answer Overflow

jesse

Explore posts from servers

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

PWA (next-pwa)

Has anyone tried to use the next-pwa with the T3 stack? Having trouble following some tutorials that I found since they are used outside of the T3 stack

1 replies

TTCTheo's Typesafe Cult

•Created by jesse on 4/5/2023 in #questions

Do I need the redirect callback here?

Hi! I was try to send the user to the /home uri after the sign in workflow, but saw that I can do that with the redirect callback. I did read in the docs thought that I can just add the options for { callbackUrl: "http://localhost:3000/home" } in my signin() callback. So I was wondering do I even need the redirect callback declared in my auth.ts file? Code for Client:

<button
                className="rounded-full bg-white/10 px-10 py-3 font-semibold text-white no-underline transition hover:bg-white/20"
                onClick={
                    sessionData ? () => void signOut() : () => void signIn(
                        'credential',
                        {
                            callbackUrl: 'http://localhost:3000/home',
                        }
                    )
                }
            >

<button
                className="rounded-full bg-white/10 px-10 py-3 font-semibold text-white no-underline transition hover:bg-white/20"
                onClick={
                    sessionData ? () => void signOut() : () => void signIn(
                        'credential',
                        {
                            callbackUrl: 'http://localhost:3000/home',
                        }
                    )
                }
            >

Code for Auth.ts:

export const authOptions: NextAuthOptions = {
    callbacks: {
        session({ session, token }) {
            // Deconstruct the user object from the token and add it to the session, don't want to send password to the client. Only information that we need
            const { id, username, email, firstName, lastName, image } =
                token.user;
            session.user = { id, username, email, firstName, lastName, image };
            console.log('SESSION callback session', session);
            return session;
        },
        // Called first, before jwt is returned
        jwt({ token, user }) {
            user && (token.user = user);
            return token;
        },
        redirect({ url, baseUrl }) {
            if (url.startsWith('/')) return `${baseUrl}${url}`;
            else if (new URL(url).origin === baseUrl) return url;
            return baseUrl;
        },
    },

export const authOptions: NextAuthOptions = {
    callbacks: {
        session({ session, token }) {
            // Deconstruct the user object from the token and add it to the session, don't want to send password to the client. Only information that we need
            const { id, username, email, firstName, lastName, image } =
                token.user;
            session.user = { id, username, email, firstName, lastName, image };
            console.log('SESSION callback session', session);
            return session;
        },
        // Called first, before jwt is returned
        jwt({ token, user }) {
            user && (token.user = user);
            return token;
        },
        redirect({ url, baseUrl }) {
            if (url.startsWith('/')) return `${baseUrl}${url}`;
            else if (new URL(url).origin === baseUrl) return url;
            return baseUrl;
        },
    },

1 replies

TTCTheo's Typesafe Cult

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

Question about the use of useSession() callback

Why do all of the examples do the const {data:sessionData} for the callback when you can just write

const sessionData = useSession();

const sessionData = useSession();

const Home: NextPage = () => {
    const {data:sessionData} = useSession();
    const printMessage = () => {
        console.log(sessionData?.user.firstName);
    };

const Home: NextPage = () => {
    const {data:sessionData} = useSession();
    const printMessage = () => {
        console.log(sessionData?.user.firstName);
    };

5 replies

TTCTheo's Typesafe Cult

•Created by jesse on 3/8/2023 in #questions

Issue with useMutation() when trying to test React component

Hi, I am having issues with my test failing since it cannot render the component properly because of this error:

TypeError: Cannot destructure property 'client' of 'useContext(...)' as it is null.
 ❯ Object.useMutation$1 [as useMutation] node_modules/@trpc/react-query/dist/createHooksInternal-416876ed.mjs:372:17
 ❯ node_modules/@trpc/react-query/dist/createHooksInternal-416876ed.mjs:50:34
 ❯ Object.apply node_modules/@trpc/server/dist/index-972002da.mjs:18:20
 ❯ SignUp src/pages/signup.tsx:14:43
     12| 
     13| const SignUp: NextPage = () => {
     14|  const userMutation = api.user.createUser.useMutation();
       |                                           ^
     15|  const router = useRouter();
     16| 
 ❯ renderWithHooks node_modules/react-dom/cjs/react-dom.development.js:16305:18
 ❯ mountIndeterminateComponent node_modules/react-dom/cjs/react-dom.development.js:20074:13
 ❯ beginWork node_modules/react-dom/cjs/react-dom.development.js:21587:16
 ❯ beginWork$1 node_modules/react-dom/cjs/react-dom.development.js:27426:14
 ❯ performUnitOfWork node_modules/react-dom/cjs/react-dom.development.js:26560:12
 ❯ workLoopSync node_modules/react-dom/cjs/react-dom.development.js:26466:5

TypeError: Cannot destructure property 'client' of 'useContext(...)' as it is null.
 ❯ Object.useMutation$1 [as useMutation] node_modules/@trpc/react-query/dist/createHooksInternal-416876ed.mjs:372:17
 ❯ node_modules/@trpc/react-query/dist/createHooksInternal-416876ed.mjs:50:34
 ❯ Object.apply node_modules/@trpc/server/dist/index-972002da.mjs:18:20
 ❯ SignUp src/pages/signup.tsx:14:43
     12| 
     13| const SignUp: NextPage = () => {
     14|  const userMutation = api.user.createUser.useMutation();
       |                                           ^
     15|  const router = useRouter();
     16| 
 ❯ renderWithHooks node_modules/react-dom/cjs/react-dom.development.js:16305:18
 ❯ mountIndeterminateComponent node_modules/react-dom/cjs/react-dom.development.js:20074:13
 ❯ beginWork node_modules/react-dom/cjs/react-dom.development.js:21587:16
 ❯ beginWork$1 node_modules/react-dom/cjs/react-dom.development.js:27426:14
 ❯ performUnitOfWork node_modules/react-dom/cjs/react-dom.development.js:26560:12
 ❯ workLoopSync node_modules/react-dom/cjs/react-dom.development.js:26466:5

Component:

import { type NextPage } from "next";
import { api } from "../utils/api";
import { useRouter } from "next/router";

interface UserCreationInput {
    firstName: string;
    lastName: string;
    username: string;
    password: string;
    email: string;
}

const SignUp: NextPage = () => {
    const userMutation = api.user.createUser.useMutation();
    const router = useRouter();

    const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
        const firstName = (
            document.getElementById("firstName") as HTMLInputElement
        ).value;
        const lastName = (
            document.getElementById("lastName") as HTMLInputElement
        ).value;
        const username = (
            document.getElementById("username") as HTMLInputElement
        ).value;
        const password = (
            document.getElementById("password") as HTMLInputElement
        ).value;
        const email = (document.getElementById("email") as HTMLInputElement)
            .value;

        if (!firstName || !lastName || !username || !password || !email) {
            alert("Please fill out all fields");
            return;
        }

        const input: UserCreationInput = {
            firstName,
            lastName,
            username,
            password,
            email,
        };

        const res = createUser(input);
        e.preventDefault();
        await router.push("/");
    };

    const createUser = (input: UserCreationInput) => {
        userMutation.mutate(input);
    };

    return (
        <>
            <main className="flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#749a7e] to-[#acafe8]">
                <div className="flex flex-col items-center justify-center gap-4">
                    <p className="text-center text-2xl text-white">Sign Up</p>
...

import { type NextPage } from "next";
import { api } from "../utils/api";
import { useRouter } from "next/router";

interface UserCreationInput {
    firstName: string;
    lastName: string;
    username: string;
    password: string;
    email: string;
}

const SignUp: NextPage = () => {
    const userMutation = api.user.createUser.useMutation();
    const router = useRouter();

    const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
        const firstName = (
            document.getElementById("firstName") as HTMLInputElement
        ).value;
        const lastName = (
            document.getElementById("lastName") as HTMLInputElement
        ).value;
        const username = (
            document.getElementById("username") as HTMLInputElement
        ).value;
        const password = (
            document.getElementById("password") as HTMLInputElement
        ).value;
        const email = (document.getElementById("email") as HTMLInputElement)
            .value;

        if (!firstName || !lastName || !username || !password || !email) {
            alert("Please fill out all fields");
            return;
        }

        const input: UserCreationInput = {
            firstName,
            lastName,
            username,
            password,
            email,
        };

        const res = createUser(input);
        e.preventDefault();
        await router.push("/");
    };

    const createUser = (input: UserCreationInput) => {
        userMutation.mutate(input);
    };

    return (
        <>
            <main className="flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#749a7e] to-[#acafe8]">
                <div className="flex flex-col items-center justify-center gap-4">
                    <p className="text-center text-2xl text-white">Sign Up</p>
...

If someone has also set up testing with vitest in their project, I would also be down to just start from the beginning with you. I have been trying to get this to render all day 😕

11 replies

TTCTheo's Typesafe Cult

•Created by jesse on 11/11/2022 in #questions

What is everyone using for testing their T3 App?

I just wanted to hear some thoughts on testing philosophy as well as any implementation that people have.

12 replies

TTCTheo's Typesafe Cult

•Created by jesse on 11/6/2022 in #questions

Authentication with Credentials with Create T3

Hi! Has anyone done a project using create t3 then used credentials with NextAuth? I found a tutorial online, but it seems to do things pretty differently from the way they would be done in the create t3 scaffolding. For reference this is the article that I was looking at, https://dev.to/franciscomendes10866/nextjs-authentication-with-next-auth-trpc-and-prisma-kgl. I tried to add/configure from this project to the create t3 scaffold, but I didn't have any success.

6 replies

Gaming

Programming