Saltar al contenido principal

Actualizar atributos del usuario, por ejemplo, el número de teléfono del usuario

En este ejemplo, demostramos cómo actualizar los atributos de un usuario, como su número de teléfono, utilizando la API de OneEntry.

✅ Propósito del escenario:

  • El usuario se autentica con un inicio de sesión y una contraseña
  • Obtenemos los datos actuales del usuario para prellenar el formulario en el frontend
  • El usuario edita un campo (por ejemplo, teléfono) y guarda
  • Guarda los datos del usuario en la Plataforma OneEntry

✅ Lo que necesitas:

  • Un PROJECT_URL y un APP_TOKEN válidos para la autenticación con la API de OneEntry.
  • Formulario de registro con el marcador "reg"
  • Campos del formulario (atributos) con los marcadores "email_reg", "password_reg", "name_reg", "phone_reg"
  • Un usuario existente y activado para autenticarte como

📌 Importante:

  • Estos ejemplos no incluyen manejo de errores.
  • Puedes gestionar errores utilizando un bloque try-catch o empleando una construcción como await Promise.catch((error) => error).
  • Asegúrate de que el formIdentifier utilizado en el método updateUser() coincida con el configurado en tu proyecto de OneEntry.

📚 Ver en la documentación:

📦 Referencia del SDK:

Pruébalo en vivo​

Ejecuta este método de forma interactiva en el sandbox del JS SDK — conecta tu Project URL y App Token en la primera visita, luego abre:

Escenario​

1. Importar defineOneEntry desde el SDK y definir PROJECT_URL y APP_TOKEN​

Ejemplo:

import { defineOneEntry } from 'oneentry';

const PROJECT_URL = 'your-project-url';
const APP_TOKEN = 'your-app-token';

2. Crear un cliente API con defineOneEntry()​

Ejemplo:

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

3. Formar authData y autenticar al usuario con AuthProvider.auth()​

Ejemplo:

useEffect(() => {
  const authData = [
    { marker: 'email_reg', value: emailReg },
    { marker: 'password_reg', value: passwordReg },
  ];
  AuthProvider.auth('email', { authData })

4. Obtener el usuario actual para prellenar el formulario Users.getUser()​

Ejemplo:

.then(() => Users.getUser())
.then((data: any) => {
  setUser(data);
  const initial: Record<string, string> = {};
  (Array.isArray(data?.formData) ? data.formData : []).forEach((d: any) => {
    initial[d.marker] = displayValue(d.value);
  });
  setValues(initial);

  console.log('User ', data);
})
.catch(console.error);
]);
Resultado:
{
  "id": 39,
  "total": "1",
  "identifier": "kvasssukr.net@gmail.com",
  "authProviderIdentifier": "email",
  "formData": [
    {
      "marker": "name_reg",
      "type": "string",
      "value": "Ivan"
    },
    {
      "marker": "phone_reg",
      "type": "string",
      "value": "+10000000001"
    },
    {
      "marker": "email_notification_reg",
      "type": "string",
      "value": "test@example.com"
    }
  ],
  "formIdentifier": "reg",
  "groups": [
    1
  ],
  "state": {},
  "rating": {},
  "moduleFormConfigs": []
}

5. Actualizar el usuario con Users.updateUser()​

Ejemplo:

const formData = fields.map((d: any) => ({
  marker: d.marker,
  type: d.type,
  value: prepareValue(d.type, values[d.marker] ?? displayValue(d.value)),
}));
const body = {
  formIdentifier: 'reg',
  authData: [{ marker: 'password_reg', value: passwordReg }],
  formData,
  notificationData: {
    email: emailReg,
    phonePush: values['phone_reg'] ? [values['phone_reg']] : [],
    phoneSMS: values['phone_reg'] ?? '',
  },
};
const updateUser = (await Users.updateUser(body as any).catch(
  (err: any) => err,
)) as any;

6. Obtener el usuario actualizado con Users.getUser()​

Ejemplo:

const userData = await Users.getUser().catch((err: any) => err);
Resultado:
{
  "id": 39,
  "total": "1",
  "identifier": "kvasssukr.net@gmail.com",
  "authProviderIdentifier": "email",
  "formData": [
    {
      "marker": "name_reg",
      "type": "string",
      "value": "Ivan"
    },
    {
      "marker": "phone_reg",
      "type": "string",
      "value": "+10000000001"
    },
    {
      "marker": "email_notification_reg",
      "type": "string",
      "value": "test@example.com"
    }
  ],
  "formIdentifier": "reg",
  "groups": [
    1
  ],
  "state": {},
  "rating": {},
  "moduleFormConfigs": []
}

Ejemplo final​

import React from 'react';

// Note: React is a sandbox global — in your project use named imports from 'react'
const { useState, useEffect } = React;

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

const PROJECT_URL = 'your-project-url';
const APP_TOKEN = 'your-app-token';

// 2. Creating an API client with [defineOneEntry()](/docs/index/#Installation)
const { AuthProvider, Users } = defineOneEntry(PROJECT_URL, {
  token: APP_TOKEN,
});

// 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;
}

// Read a displayable string from a user formData entry's value
function displayValue(value: any): string {
  if (typeof value === 'string') return value;
  if (Array.isArray(value)) return value[0]?.plainValue ?? value[0]?.value ?? '';
  return value?.plainValue ?? '';
}

// Choose a sensible input type for a 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 UpdateUser = () => {
  const [user, setUser] = useState<any>(null);
  const [values, setValues] = useState<Record<string, string>>({});
  const [status, setStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');
  const [errorMsg, setErrorMsg] = useState('');

  // Pre-filled credentials (substituted at runtime from your settings)
  const emailReg = 'your-email';
  const passwordReg = 'your-password';

  // 3. Forming authData and authenticate user with [AuthProvider.auth()](/docs/auth-provider/auth)
  useEffect(() => {
    const authData = [
      { marker: 'email_reg', value: emailReg },
      { marker: 'password_reg', value: passwordReg },
    ];
    AuthProvider.auth('email', { authData })
      // 4. Get the current user with [Users.getUser()](/docs/users/getUser) to pre-fill the form
      .then(() => Users.getUser())
      .then((data: any) => {
        setUser(data);
        const initial: Record<string, string> = {};
        (Array.isArray(data?.formData) ? data.formData : []).forEach((d: any) => {
          initial[d.marker] = displayValue(d.value);
        });
        setValues(initial);

        console.log('User ', data);
      })
      .catch(console.error);
  }, []);

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

  const fields = Array.isArray(user.formData) ? user.formData : [];

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

    // 5. Update user with [Users.updateUser()](/docs/users/updateUser)
    const formData = fields.map((d: any) => ({
      marker: d.marker,
      type: d.type,
      value: prepareValue(d.type, values[d.marker] ?? displayValue(d.value)),
    }));
    const body = {
      formIdentifier: 'reg',
      authData: [{ marker: 'password_reg', value: passwordReg }],
      formData,
      notificationData: {
        email: emailReg,
        phonePush: values['phone_reg'] ? [values['phone_reg']] : [],
        phoneSMS: values['phone_reg'] ?? '',
      },
    };
    const updateUser = (await Users.updateUser(body as any).catch(
      (err: any) => err,
    )) as any;

    if (updateUser?.statusCode >= 400) {
      setErrorMsg(updateUser.message || 'Update failed');
      setStatus('error');
      return;
    }

    // 6. Get the updated user with [Users.getUser()](/docs/users/getUser)
    const userData = await Users.getUser().catch((err: any) => err);
    setUser(userData);

    console.log({ updateUser, userData });
    setStatus('success');
  };

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

      {fields.map((field: any) => {
        const value = values[field.marker] ?? '';
        const onChange = (val: string) =>
          setValues((prev) => ({ ...prev, [field.marker]: val }));

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

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

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

export default UpdateUser;