Registrar um usuário

Registra um novo usuário.

O que este exemplo faz:

• Obtém o formulário de cadastro para montar o formulário no frontend
• Cadastra o usuário com os dados que ele informa
• Se o provedor de autenticação exigir verificação por código, envia ao usuário um código de ativação por e-mail ou SMS
• Ativa o usuário com o código que ele informa

Pré-requisitos:

• Um PROJECT_URL e um APP_TOKEN válidos para a API do OneEntry.
• Um formulário de cadastro com o marcador "reg"
• Campos do formulário (atributos) com os marcadores "email_reg", "password_reg", "name_reg", "phone_reg"
• Um endereço de e-mail ou número de telefone válido para receber o código de ativação

Observações:

• Os exemplos tratam erros de forma mínima: verificam se há um objeto de erro e param.
• Por padrão (isShell: true), o SDK retorna um objeto de erro em vez de lançar uma exceção, então verifique o resultado, por exemplo 'statusCode' in result. Com isShell: false, ele lança a exceção, e você trata os erros com try/catch. Veja Erros.

Documentação da plataforma:

• Users
• Forms

Referência do SDK:

• AuthProvider

Experimente ao vivo

Execute este exemplo no sandbox do JS SDK. Conecte a URL do seu projeto e o App Token na primeira visita e, em seguida, abra:

• Registrar um usuário

Cenário

Os passos abaixo são trechos do componente React do Exemplo final. Os setters de estado, as credenciais e os helpers, como values, sortedFields, AUTH_MARKERS e prepareValue, estão definidos lá.

1. Importar defineOneEntry e definir PROJECT_URL e APP_TOKEN

import { defineOneEntry } from 'oneentry';
import type { ISignUpData } from 'oneentry';

const PROJECT_URL = 'https://your-project.oneentry.cloud';
const APP_TOKEN = 'your-app-token';

2. Criar um cliente da API com defineOneEntry()

const { AuthProvider, Forms } = defineOneEntry(PROJECT_URL, {
  token: APP_TOKEN,
});

3. Obter o formulário de cadastro para montar o formulário do frontend com Forms.getFormByMarker()

// Pre-filled credentials
const emailReg = 'your-email';
const passwordReg = 'your-password';
const nameReg = 'your-name';

useEffect(() => {
  Forms.getFormByMarker('reg').then((data: any) => {
    if ('statusCode' in data) {
      setErrorMsg(data.message);
      setStatus('error');
      return;
    }
    setForm(data);
    const initial: Record<string, string> = {};
    data?.attributes?.forEach((a: any) => {
      // Pre-fill the login and name fields so the example is runnable out of the box
      initial[a.marker] =
        a.marker === 'email_reg'
          ? emailReg
          : a.marker === 'password_reg'
            ? passwordReg
            : a.marker === 'name_reg'
              ? nameReg
              : '';
    });
    setValues(initial);

    console.log('Form: ', data);
  }).catch((err) => {
    setErrorMsg(String(err));
    setStatus('error');
  });
}, []);

Resultado:

{
  "id": 4,
  "attributeSetId": 5,
  "type": "sign_in_up",
  "localizeInfos": {
    "title": "Registration",
    "titleForSite": "",
    "successMessage": "",
    "unsuccessMessage": "",
    "urlAddress": "",
    "database": "0",
    "script": "0"
  },
  "version": 0,
  "position": 1,
  "identifier": "reg",
  "processingType": "script",
  "templateId": null,
  "attributes": [
    {
      "type": "string",
      "marker": "email_reg",
      "isLogin": true,
      "isSignUp": false,
      "position": 1,
      "settings": {},
      "isVisible": true,
      "isPassword": false,
      "listTitles": [],
      "validators": {
        "requiredValidator": {
          "strict": true
        },
        "emailInspectionValidator": true
      },
      "initialValue": null,
      "localizeInfos": {
        "title": "E-mail"
      },
      "additionalFields": {},
      "isSignUpRequired": false,
      "isNotificationEmail": false,
      "isNotificationPhoneSMS": false,
      "isNotificationPhonePush": false
    },
    {
      "type": "string",
      "marker": "name_reg",
      "isLogin": false,
      "isSignUp": true,
      "position": 2,
      "settings": {},
      "isVisible": true,
      "isPassword": false,
      "listTitles": [],
      "validators": {
        "requiredValidator": {
          "strict": true
        }
      },
      "initialValue": null,
      "localizeInfos": {
        "title": "Name"
      },
      "additionalFields": {},
      "isSignUpRequired": false,
      "isNotificationEmail": false,
      "isNotificationPhoneSMS": false,
      "isNotificationPhonePush": false
    },
    {
      "type": "string",
      "marker": "phone_reg",
      "isLogin": false,
      "isSignUp": true,
      "position": 3,
      "settings": {},
      "isVisible": true,
      "isPassword": false,
      "listTitles": [],
      "validators": {
        "requiredValidator": {
          "strict": true
        }
      },
      "initialValue": null,
      "localizeInfos": {
        "title": "Phone"
      },
      "additionalFields": {},
      "isSignUpRequired": false,
      "isNotificationEmail": false,
      "isNotificationPhoneSMS": false,
      "isNotificationPhonePush": false
    },
    {
      "type": "string",
      "marker": "password_reg",
      "isLogin": false,
      "isSignUp": false,
      "position": 4,
      "settings": {},
      "isVisible": true,
      "isPassword": true,
      "listTitles": [],
      "validators": {
        "requiredValidator": {
          "strict": true
        },
        "stringInspectionValidator": {
          "stringMax": 0,
          "stringMin": 0,
          "stringLength": 0
        }
      },
      "initialValue": null,
      "localizeInfos": {
        "title": "Password"
      },
      "additionalFields": {},
      "isSignUpRequired": false,
      "isNotificationEmail": false,
      "isNotificationPhoneSMS": false,
      "isNotificationPhonePush": false
    },
    {
      "type": "string",
      "marker": "email_notification_reg",
      "isLogin": false,
      "isSignUp": false,
      "position": 5,
      "settings": {},
      "isVisible": true,
      "isPassword": false,
      "listTitles": [],
      "validators": {},
      "initialValue": null,
      "localizeInfos": {
        "title": "email for notification"
      },
      "additionalFields": {},
      "isSignUpRequired": false,
      "isNotificationEmail": true,
      "isNotificationPhoneSMS": false,
      "isNotificationPhonePush": false
    }
  ],
  "total": "1",
  "moduleFormConfigs": []
}

4. Preparar os dados de cadastro

const authData = [
  { marker: 'email_reg', value: email },
  { marker: 'password_reg', value: password },
];
const formData = sortedFields
  .filter((f: any) => !AUTH_MARKERS.includes(f.marker) && values[f.marker] !== '')
  .map((f: any) => ({
    marker: f.marker,
    type: f.type,
    value: prepareValue(f.type, values[f.marker] ?? ''),
  }));
const registrationData: ISignUpData = {
  formIdentifier: 'reg',
  authData,
  formData,
  notificationData: {
    email,
    phonePush: [],
    phoneSMS: values['phone_reg'] || '',
  },
};

5. Cadastrar o usuário com AuthProvider.signUp()

const newUser = await AuthProvider.signUp('email', registrationData);

if ('statusCode' in newUser) {
  setErrorMsg(newUser.message || 'Registration failed');
  setStatus('error');
  return;
}

Resultado:

{
  "identifier": "john@example.com",
  "isActive": true,
  "formData": [
    {
      "marker": "name_reg",
      "type": "string",
      "value": "John"
    },
    {
      "marker": "phone_reg",
      "type": "string",
      "value": "+12025550147"
    },
    {
      "marker": "email_notification_reg",
      "type": "string",
      "value": "john@example.com"
    }
  ],
  "notificationData": {
    "email": "john@example.com",
    "phonePush": [],
    "phoneSMS": "+12025550147"
  },
  "locale": "en_US",
  "updatedDate": "2026-06-06T12:45:01.228Z",
  "importId": null,
  "deletedAt": null,
  "attributeSetId": null,
  "id": 40,
  "createdDate": "2026-06-06T12:45:01.228Z",
  "version": 0,
  "isDeleted": false,
  "state": {},
  "rating": {},
  "attributesSets": {}
}

6. Ativar o usuário com AuthProvider.activateUser()

Esta etapa se aplica apenas quando a verificação por código está ativada para o provedor de autenticação. Nesse caso, signUp retorna isActive: false até você chamar activateUser(), que verifica o código por conta própria, então não é necessária uma chamada separada a checkCode(). A etapa está comentada aqui porque o provedor de exemplo tem a verificação desativada, então signUp retorna isActive: true, como no resultado acima.

// const code = prompt('Enter the activation code:') as string;
// const activated = await AuthProvider.activateUser('email', email, code);
// if (activated !== true) throw new Error('Activation failed');

7. Autenticar o usuário ativado com AuthProvider.auth()

const authResponse = await AuthProvider.auth('email', { authData });

if ('statusCode' in authResponse) {
  setErrorMsg(authResponse.message);
  setStatus('error');
  return;
}

Resultado:

{
  "userIdentifier": "john@example.com",
  "authProviderIdentifier": "email",
  "accessToken": "eyJhbGciOiJIUzI1NiIsInR...pZCI6MTYsImF1dGhQ",
  "refreshToken": "1745494429101-...-2834edf8"
}

Exemplo final

import { useState, useEffect } from 'react';

// 1. Import defineOneEntry and define PROJECT_URL and APP_TOKEN
import { defineOneEntry } from 'oneentry';
import type { ISignUpData } from 'oneentry';

const PROJECT_URL = 'https://your-project.oneentry.cloud';
const APP_TOKEN = 'your-app-token';

// 2. Create an API client
const { AuthProvider, Forms } = defineOneEntry(PROJECT_URL, {
  token: APP_TOKEN,
});

// Markers that authenticate the user — everything else is sent as form data
const AUTH_MARKERS = ['email_reg', 'password_reg'];
// Prepare value for API submission by field type
function prepareValue(type: string, value: string) {
  if (type === 'text') return [{ plainValue: value }];
  if (type === 'list' || type === 'radioButton') return [value];
  return value;
}

// Choose a sensible input type for a registration field by its marker
function inputTypeFor(marker: string) {
  if (marker.includes('password')) return 'password';
  if (marker.includes('email')) return 'email';
  if (marker.includes('phone')) return 'tel';
  return 'text';
}

const RegisterUser = () => {
  const [form, setForm] = useState<any>(null);
  const [values, setValues] = useState<Record<string, string>>({});
  const [status, setStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');
  const [errorMsg, setErrorMsg] = useState('');

  // 3. Get the registration form to build the frontend form

  // Pre-filled credentials
  const emailReg = 'your-email';
  const passwordReg = 'your-password';
  const nameReg = 'your-name';
  
  useEffect(() => {
    Forms.getFormByMarker('reg').then((data: any) => {
      if ('statusCode' in data) {
        setErrorMsg(data.message);
        setStatus('error');
        return;
      }
      setForm(data);
      const initial: Record<string, string> = {};
      data?.attributes?.forEach((a: any) => {
        // Pre-fill the login and name fields so the example is runnable out of the box
        initial[a.marker] =
          a.marker === 'email_reg'
            ? emailReg
            : a.marker === 'password_reg'
              ? passwordReg
              : a.marker === 'name_reg'
                ? nameReg
                : '';
      });
      setValues(initial);

      console.log('Form: ', data);
    }).catch((err) => {
      setErrorMsg(String(err));
      setStatus('error');
    });
  }, []);

  if (status === 'error' && !form) return <p role="alert">{errorMsg}</p>;

  if (!form) return <div>Loading...</div>;

  const sortedFields = [...(form.attributes || [])].sort(
    (a: any, b: any) => a.position - b.position,
  );

  const handleSubmit = async (e: any) => {
    e.preventDefault();
    setStatus('loading');
    setErrorMsg('');

    const email = values['email_reg'] || emailReg;
    const password = values['password_reg'] || passwordReg;

    // 4. Prepare the registration data
    const authData = [
      { marker: 'email_reg', value: email },
      { marker: 'password_reg', value: password },
    ];
    const formData = sortedFields
      .filter((f: any) => !AUTH_MARKERS.includes(f.marker) && values[f.marker] !== '')
      .map((f: any) => ({
        marker: f.marker,
        type: f.type,
        value: prepareValue(f.type, values[f.marker] ?? ''),
      }));
    const registrationData: ISignUpData = {
      formIdentifier: 'reg',
      authData,
      formData,
      notificationData: {
        email,
        phonePush: [],
        phoneSMS: values['phone_reg'] || '',
      },
    };

    // 5. Register the user
    const newUser = await AuthProvider.signUp('email', registrationData);

    if ('statusCode' in newUser) {
      setErrorMsg(newUser.message || 'Registration failed');
      setStatus('error');
      return;
    }

    // 6. Activate the user (only when code verification is enabled)
    // const code = prompt('Enter the activation code:') as string;
    // const activated = await AuthProvider.activateUser('email', email, code);
    // if (activated !== true) {
    //   setErrorMsg('Activation failed');
    //   setStatus('error');
    //   return;
    // }

    // 7. Authenticate the user
    const authResponse = await AuthProvider.auth('email', { authData });

    if ('statusCode' in authResponse) {
      setErrorMsg(authResponse.message);
      setStatus('error');
      return;
    }

    console.log({ newUser, authResponse });
    setStatus('success');
  };

  return (
    <form onSubmit={handleSubmit}>
      <h2>{form.localizeInfos?.title || 'Register'}</h2>

      {sortedFields.map((field: any) => {
        const label = field.localizeInfos?.title || field.marker;
        const value = values[field.marker] || '';
        const required = !!field.validators?.requiredValidator?.strict;
        const placeholder = field.additionalFields?.placeholder?.value || '';
        const onChange = (val: string) =>
          setValues((prev) => ({ ...prev, [field.marker]: val }));

        return (
          <div key={field.marker}>
            <label htmlFor={field.marker}>{label}</label>
            <input
              id={field.marker}
              type={inputTypeFor(field.marker)}
              value={value}
              placeholder={placeholder}
              required={required}
              onChange={(e: { target: { value: string } }) => onChange(e.target.value)}
            />
          </div>
        );
      })}

      <button type="submit" disabled={status === 'loading'}>
        {status === 'loading' ? 'Registering...' : 'Register'}
      </button>

      {status === 'error' && <p role="alert">{errorMsg}</p>}
      {status === 'success' && (
        <p role="status">User registered and authenticated!</p>
      )}
    </form>
  );
};

export default RegisterUser;