Lewati ke konten utama

Pendaftaran pengguna

Dalam contoh ini, kami menunjukkan cara mendaftarkan pengguna baru menggunakan API OneEntry.

✅ Tujuan skenario:

  • Kami mendapatkan formulir pendaftaran untuk menghasilkan formulir frontend
  • Pengguna memasukkan data yang diperlukan dan mendaftar.
  • Setelah pendaftaran, pengguna menerima kode aktivasi melalui email/sms
  • Pengguna memasukkan kode aktivasi dan mengaktifkan pengguna yang dibuat.

✅ Apa yang Anda butuhkan:

  • PROJECT_URL dan APP_TOKEN yang valid untuk otentikasi dengan API OneEntry.
  • Formulir pendaftaran dengan penanda "reg"
  • Bidang formulir (atribut) dengan penanda "email_reg", "password_reg", "name_reg", "phone_reg"
  • Email/nomor telepon yang valid untuk menerima kode aktivasi

📌 Penting:

  • Contoh ini tidak mencakup penanganan kesalahan.
  • Anda dapat mengelola kesalahan menggunakan blok try-catch atau dengan menggunakan konstruksi seperti await Promise.catch((error) => error).

📚 Lihat di dokumentasi:

📦 Referensi SDK:

Coba secara langsung​

Jalankan metode ini secara interaktif di JS SDK sandbox — sambungkan Project URL dan App Token Anda pada kunjungan pertama, lalu buka:

  • Pendaftaran pengguna — Dalam contoh ini, kami menunjukkan cara mendaftarkan pengguna baru menggunakan API OneEntry.

Skenario​

1. Impor defineOneEntry dari SDK dan definisikan PROJECT_URL dan APP_TOKEN​

Contoh:

import { defineOneEntry } from 'oneentry';

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

2. Membuat klien API dengan defineOneEntry()​

Contoh:

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

3. Kami mendapatkan formulir pendaftaran untuk menghasilkan formulir frontend Forms.getFormByMarker()​

Contoh:

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

useEffect(() => {
  Forms.getFormByMarker('reg').then((data: any) => {
    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 Entity ', data);
  }).catch(console.error);
}, []);
Hasil:
{
  "id": 4,
  "attributeSetId": 5,
  "type": "sing_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. Mempersiapkan data untuk pendaftaran pengguna​

Contoh:

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 = {
  formIdentifier: 'reg',
  authData,
  formData,
  notificationData: {
    email,
    phonePush: [],
    phoneSMS: values['phone_reg'] || '',
  },
};

5. Daftarkan pengguna dengan AuthProvider.signUp()​

Contoh:

const newUser = (await AuthProvider.signUp(
  'email',
  registrationData as any,
).catch((err: any) => err)) as any;
Hasil:
{
  "identifier": "kvasssukr.net@gmail.com",
  "isActive": true,
  "formData": [
    {
      "marker": "name_reg",
      "type": "string",
      "value": "Ivan"
    },
    {
      "marker": "phone_reg",
      "type": "string",
      "value": "+10000000000"
    },
    {
      "marker": "email_notification_reg",
      "type": "string",
      "value": "test@example.com"
    }
  ],
  "notificationData": {
    "email": "kvasssukr.net@gmail.com",
    "phonePush": [],
    "phoneSMS": "+10000000000"
  },
  "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. Pengguna memasukkan kode aktivasi → verifikasi dengan AuthProvider.checkCode()​

Contoh:

// const code = prompt('Enter verification code:') as string;
// const isCorrect = await AuthProvider.checkCode('email', email, '1', code).catch(
//   (err: any) => err,
// );

6. 1 aktifkan pengguna dengan AuthProvider.activateUser()​

Contoh:

// if (isCorrect) {
//   await AuthProvider.activateUser('email', email, code).catch((err: any) => err);
// }

7. Autentikasi pengguna yang diaktifkan dengan AuthProvider.auth()​

Contoh:

const authResponse = await AuthProvider.auth('email', { authData }).catch(
  (err: any) => err,
);
Hasil:
{
  "userIdentifier": "kvasssukr.net@gmail.com",
  "authProviderIdentifier": "email",
  "accessToken": "eyJhbGciOiJIUzI1NiIsInR...pZCI6MTYsImF1dGhQ"
  "refreshToken": "1745494429101-...-2834edf8"
}

Contoh akhir​

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, 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. We get a registration form with [Forms.getFormByMarker()](/docs/forms/getFormByMarker) for generating a frontend form

  // Pre-filled credentials
  const emailReg = 'your-email';
  const passwordReg = 'your-password';
  const nameReg = 'your-name';
  
  useEffect(() => {
    Forms.getFormByMarker('reg').then((data: any) => {
      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 Entity ', data);
    }).catch(console.error);
  }, []);

  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. Preparing data for user registration
    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 = {
      formIdentifier: 'reg',
      authData,
      formData,
      notificationData: {
        email,
        phonePush: [],
        phoneSMS: values['phone_reg'] || '',
      },
    };

    // 5. Register the user with [AuthProvider.signUp()](/docs/auth-provider/signUp)
    const newUser = (await AuthProvider.signUp(
      'email',
      registrationData as any,
    ).catch((err: any) => err)) as any;

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

    // 6. User enters the activation code → verify with [AuthProvider.checkCode()](/docs/auth-provider/checkCode)
    // const code = prompt('Enter verification code:') as string;
    // const isCorrect = await AuthProvider.checkCode('email', email, '1', code).catch(
    //   (err: any) => err,
    // );
    // 6.1 activate user with [AuthProvider.activateUser()](/docs/category/authprovider)
    // if (isCorrect) {
    //   await AuthProvider.activateUser('email', email, code).catch((err: any) => err);
    // }

    // 7. Authenticate the activated user with [AuthProvider.auth()](/docs/auth-provider/auth)
    const authResponse = await AuthProvider.auth('email', { authData }).catch(
      (err: any) => err,
    );

    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;