Clemens Posts - Answer Overflow

Clemens

•Created by Clemens on 3/23/2025 in #questions

How to properly add Google Sign In to existing application that has email login implemented already?

Hi, In my app I already have a working login system for email + password sign in. Now I would like to add Google Sign in as well. I already managed to allow user sign in with google but I wonder how I can properly handle user creation in the database in regards to username. Here is what my user model looks like:

model User {
  id                  String               @id @default(cuid())
  createdAt           DateTime             @default(now()) @map("created_at")
  updatedAt           DateTime             @updatedAt @map("updated_at")
  username            String               @unique
  email               String               @unique
  passwordHash        String               @map("password_hash")
  ratings             Rating[]
  favoriteEpisodes    Episode[]
  resetPasswordTokens ResetPasswordToken[]
  changeEmailTokens   ChangeEmailToken[]
}

model User {
  id                  String               @id @default(cuid())
  createdAt           DateTime             @default(now()) @map("created_at")
  updatedAt           DateTime             @updatedAt @map("updated_at")
  username            String               @unique
  email               String               @unique
  passwordHash        String               @map("password_hash")
  ratings             Rating[]
  favoriteEpisodes    Episode[]
  resetPasswordTokens ResetPasswordToken[]
  changeEmailTokens   ChangeEmailToken[]
}

The problem is that I somehow need to ask my user what username he wants. How can I do that? Maybe create a temporary Google Sign In User and then redirect the user after sign up and let him set the username? What kind of data model is suggested there?

5 replies

TTCTheo's Typesafe Cult

•Created by Clemens on 2/27/2025 in #questions

How to fire mutation with url query param only once

I have a simple page that has a url like that: /confirm-email?token=<token-value> Now when the user visits that page I want to confirm the email with the token from the url with useMutation. However the mutation is firing in a loop, how can I avoid this?

export interface ConfirmEmailChangeQuery extends ParsedUrlQuery {
  token: string;
}

const ConfirmEmailChange = () => {
  const router = useRouter();
  const query = router.query as ConfirmEmailChangeQuery;
  const confirmEmailChangeMutation = api.user.confirmEmailChange.useMutation();

  useEffect(() => {
    if (!query.token) {
      return;
    }
    void confirmEmailChangeMutation.mutate({
      token: query.token,
    });
  }, [confirmEmailChangeMutation, query.token]);

  return (
    <div>
      <Header title="Email is getting confirmed" />
    </div>
  );
};

export default ConfirmEmailChange;

export interface ConfirmEmailChangeQuery extends ParsedUrlQuery {
  token: string;
}

const ConfirmEmailChange = () => {
  const router = useRouter();
  const query = router.query as ConfirmEmailChangeQuery;
  const confirmEmailChangeMutation = api.user.confirmEmailChange.useMutation();

  useEffect(() => {
    if (!query.token) {
      return;
    }
    void confirmEmailChangeMutation.mutate({
      token: query.token,
    });
  }, [confirmEmailChangeMutation, query.token]);

  return (
    <div>
      <Header title="Email is getting confirmed" />
    </div>
  );
};

export default ConfirmEmailChange;

4 replies

TTCTheo's Typesafe Cult

•Created by Clemens on 1/29/2024 in #questions

Setting queryHash with t3 useQuery good practice?

I have the following problem: I'm fetching data from an external API that expects a time range with a from and a to value. Because I want to show the user the total amount of posts (let's say for today) I set the following parameters on useQuery: from = getBeginningOfTodayDate() and to = getNowDate() Since getNow obviously changes with every useQuery call, the queryKey is also different every time. This in turn causes the useQuery to return undefined which causes the frontend to show the fallback value if the data is undefined. Instead I would like the useQuery to return cached data until fresh data is available to avoid the flickering. Now, I think I could simply set the queryHash to some custom value for that specific query, like so:

const queryResult = api.router.getTotalPosts.useQuery(
    {
      from,
      to,
    },
    {
      queryHash: "getTotalPostAmount",
      refetchInterval: 60000,
    }
  );
  return queryResult.data?.data;

const queryResult = api.router.getTotalPosts.useQuery(
    {
      from,
      to,
    },
    {
      queryHash: "getTotalPostAmount",
      refetchInterval: 60000,
    }
  );
  return queryResult.data?.data;

Is that good practice or can that cause some issues in the future? Or would it be better to set the queryKey or queryKeyHashFn?

7 replies

Gaming

Programming