Gadget Developers•2w ago

Add username to signup flow

Hi. I have set up a project with the default Gadget.dev user signup/signin flow. I would like to add a required username parameter (next to the default email address and password parameters) for new users. However, in the user.signUp action, I can’t seem to retrieve any parameter from the parameter object next to email and password. How can I fix this?

7 Replies

Sector32OP•2w ago

Now that I think of it, would it be correct to add this to the signUp action: /** @type { ActionParams } */ export const params = { username: { type: "string" } };

Chocci_Milk•7d ago

I think that you should instead be passing a state query param in the signup redirect. Then you can access it from the request object in action context. I don't know if the additional params would work but you can always also try that. Note that you'll need to update the fields on the form of the sign up page

Sector32OP•7d ago

Okido, thank you. Will try that.

[Gadget] Kyle•7d ago

you want to pass the username as part of google signup or by using the email/password flow using the signUp action directly? For using the signUp action directly you pass your parameters like any other For google oauth you can pass parameters in the query parameters to start url: https://docs.gadget.dev/guides/plugins/authentication/helpers#custom-auth-state-parameters

Helpers - Developer Docs - Gadget

Gadget Docs

Sector32OP•3d ago

I would like to pass them to the signUp action directly The issue seems to be that the emailSignUp trigger removes all parameters but the email and password

[Gadget] Kyle•2d ago

ok this is a miss on our part from a DX point of view this is what I have in my api/models/user/actions/signUp.ts

import { applyParams, save, ActionOptions } from "gadget-server";

export const run: ActionRun = async ({ params, record, logger, api, session }) => {
  applyParams(
    {
      user: {
        email: params.user?.email,
        password: params.user?.password,
        firstName: params.firstName,
        lastName: params.lastName,
      }
    },
    record
  );
  record.lastSignedIn = new Date();
  await save(record);
  if (record.emailVerified) {
    session?.set("user", { _link: record.id });
  }
  return {
    result: "ok"
  };
};

export const onSuccess: ActionOnSuccess = async ({ params, record, logger, api, session }) => {
  if (!record.emailVerified) {
    await api.user.sendVerifyEmail({ email: record.email });
  }
};

export const params = {
  "firstName": { type: "string" },
  "lastName": { type: "string" }
};

export const options: ActionOptions = {
  actionType: "create",
  returnType: true,
  triggers: {
    googleOAuthSignUp: true,
    emailSignUp: true,
  },
};

import { applyParams, save, ActionOptions } from "gadget-server";

export const run: ActionRun = async ({ params, record, logger, api, session }) => {
  applyParams(
    {
      user: {
        email: params.user?.email,
        password: params.user?.password,
        firstName: params.firstName,
        lastName: params.lastName,
      }
    },
    record
  );
  record.lastSignedIn = new Date();
  await save(record);
  if (record.emailVerified) {
    session?.set("user", { _link: record.id });
  }
  return {
    result: "ok"
  };
};

export const onSuccess: ActionOnSuccess = async ({ params, record, logger, api, session }) => {
  if (!record.emailVerified) {
    await api.user.sendVerifyEmail({ email: record.email });
  }
};

export const params = {
  "firstName": { type: "string" },
  "lastName": { type: "string" }
};

export const options: ActionOptions = {
  actionType: "create",
  returnType: true,
  triggers: {
    googleOAuthSignUp: true,
    emailSignUp: true,
  },
};

note that we put the custom params at the top level and not under the params.user key 🙁 gotta talk to the team about what the ideal UX should be; but for now this should solve your problem

Sector32OP•2d ago

Thank you very much And indeed, this solves my issue. Awesome!

Gaming

Programming

Add username to signup flow

Did you find this page helpful?