Hi I'm trying to use custom form fields in Angular/Node.js.. I keep getting: "Are you sending too m...
n
Hi I'm trying to use custom form fields in Angular/Node.js.. I keep getting: "Are you sending too many / too few formFields?" I have the form fields setup on backend but frontend with Angular not really working
r
hey @nokiny how are you calling the sign up / sign in API from angular?
and can i see the backend form field config?
n
I may have just realized the issue:
Is first name and last name the payload I would give for this? I tried adding it in as custom
r
yea, first_name, and last_name in usermetadata
n
How can I enable that?
r
search user metadata in our docs
n
perfect ty
Is it possible to have pass that in a form field or do I need to use a different request to .updateUserMetaData?
Ah, found it.
weird, is this the correct setup: angular:
Copy code
js
SuperTokens.init({
  appInfo: {
    apiDomain: 'http://localhost:3000',
    apiBasePath: '/api',
    appName: 'Seat Insights',
  },
  recipeList: [Session.init(), EmailPassword.init({})],
});
nodejs backend:
Copy code
js
supertokens.init({
  framework: "express",
  supertokens: {
    connectionURI: process.env.SUPER_TOKEN_CONNECTION_URI,
    apiKey: process.env.SUPER_TOKEN_CORE_API_KEY,
  },
  appInfo: {
    appName: "Your App Name",
    apiDomain: process.env.API_DOMAIN || "http://localhost:3000",
    websiteDomain: process.env.FRONTEND_URL || "http://localhost:4200",
    apiBasePath: "/api",
  },
  recipeList: [
    EmailPassword.init({
      signUpFeature: {
        signUpForm: {
          formFields: [
            {
              id: "name",
              label: "Full name",
              placeholder: "First name and last name",
            },
          ],
        },
      },
      override: {
        functions: (originalImplementation) => {
          return {
            ...originalImplementation,
            signUp: async function (input) {
              // First we call the original implementation of signUpPOST.
              let response = await originalImplementation.signUp(input);

              // Post sign up response, we check if it was successful
              if (
                response.status === "OK" &&
                response.user.loginMethods.length === 1
              ) {
                /**
                 *
                 * response.user contains the following info:
                 * - emails
                 * - id
                 * - timeJoined
                 * - tenantIds
                 * - phone numbers
                 * - third party login info
                 * - all the login methods associated with this user.
                 * - information about if the user's email is verified or not.
                 *
                 */
                // TODO: post sign up logic
                console.log(response);
              }
              return response;
            },
          };
        },
      },
    }),
    Session.init(), // Initializes session features
    Dashboard.init(), // Initializes dashboard features
    UserMetadata.init(),
  ],
});
this gives me: "Are you sending too many / too few formFields?"
r
you have set some of the frontend configs on the backend
you may want to see the custom UI version of the doc
you have to provide the form fields in the signUp function call from the frontend
n
yea, i do
Copy code
js
let response = await signUp({
        formFields: [
          {
            id: 'email',
            value: this.userInput['email'].currentValue,
          },
          {
            id: 'password',
            value: this.userInput['password'].currentValue,
          },
          {
            id: 'name',
            value: `${this.userInput['firstName'].currentValue} ${this.userInput['lastName'].currentValue}`,
          },
        ],
      });
r
10 Views