Composables

Discover the nuxt-bedita composables to use in your custom Vue components and pages. You can explore more complete examples in the playground app.

`useBeditaAuth()`

useBeditaAuth() gives access to authenticated user and useful helpers for login, signup actions.

If enabled it uses reCAPTCHA v3.

`user`

It refers to the authenticated user data.

<script setup>
const { user } = useBeditaAuth();
</script>

<template>
  <div>Hello {{ user.name }} {{ user.surname }}</div>
</template>

`isLogged`

It refers to info about user logged.

<script setup>
const { isLogged } = useBeditaAuth();
</script>

<template>
  <div v-if="isLogged">You are logged in</div>
</template>

login(username: string, password: string) is a login helper function.

<script setup>
const { login } = useBeditaAuth();

const username = ref('');
const password = ref('');
const error = ref(false);
const isLoading = ref(false);
const showCustomBadge = useRuntimeConfig().public.recaptcha.hideBadge;

const authenticate = async () => {
  try {
    await login(username.value, password.value);
  } catch (e) {
    // do something if error happens
  }
}
</script>

<template>
  <form>
    <input v-model="username" type="text" placholder="username">
    <input v-model="password" type="password" placeholder="password">
    <button @click.prevent="authenticate()">Login</button>
  </form>
</template>

`logout`

It is a logout helper function. It cleans session data.

<script setup>
const { logout } = useBeditaAuth();
</script>

<template>
  <div>
    <button @click="logout">Logout</button>
  </div>
</template>

`updateUser`

updateUser(body: Omit<UserDataStore, 'id' | 'email' | 'username' | 'roles'>) is a helper function for save attributes of user authenticated.

It takes care to keep synchronized user data in session and in application state.

<script setup>
const { updateUser } = useBeditaAuth();

const name = ref('');
const surname = ref('');

// load all user data since `user` of `useBeditaAuth()` contains a subset of them.
// In this example we use only name and surname but we could want to change more data.
const { data: userData } = await useFetch<ApiResponseBodyResource>('/api/bedita/auth/user');
name.value = userData.value?.formattedData?.data?.attributes.name;
surname.value = userData.value?.formattedData?.data?.attributes.surname;

const save = async () => {
  try {
    await updateUser({
      name: name.value,
      surname: surname.value,
    });
  } catch (e) {
    // do something if error happens
  }
}
</script>

<template>
  <form @submit.prevent="save">
    <input v-model="name" type="text">
    <input v-model="surname" type="surname">
    <button>Save</button>
  </form>
</template>

`resetPassword`

resetPassword(contact: string) is a function that starts the "forgot password flow" calling the related BEdita API endpoint

<script setup>
const { resetPassword } = useBeditaAuth();
const email = ref('');

const startResetPassword = async () => {
  try {
    await resetPassword(email.value);
  } catch (e) {
    // do something if error happens
  }
}
</script>

<template>
  <div>
    <h1>Forgot password</h1>
    <form>
      <input v-model="email" type="email" required placeholder="john.smith@example.com">
      <button @click.prevent="startResetPassword">Reset Password</button>
    </form>
  </div>
</template>

`changePassword`

changePassword(password: string, login = false, uuid?: string) is a helper function to end the reset password flow.

<script setup>
const { resetPassword } = useBeditaAuth();
const password = ref('');

const change = async () => {
  try {
    await changePassword(email.value);
  } catch (e) {
    // do something if error happens
  }
}
</script>

<template>
  <div>
    <h2>Change Password</h2>
    <form>
      <label>
        <div>New password</div>
        <input v-model="password" type="password" required>
      </label>
      <button @click.prevent="change()">Change password</button>
    </form>
  </div>
</template>

`optOut`

IoptOut(username: string, password: string) performs a user opt-out deleting it from the BEdita.

<script setup>
const { optOut } = useBeditaAuth();

const username = ref('');
const password = ref('');

const deleteAccount = async () => {
  try {
    await optOut(username.value, password.value);
  } catch (e) {
    // handle error
  }
}

</script>

<template>
  <div>
    <h2>Opt-out Page</h2>
    <form>
      <input v-model="username" type="text" placeholder="username">
      <input v-model="password" type="password" placeholder="password">
      <button @click.prevent="deleteAccount()">Delete account</button>
    </form>
  </div>
</template>

`useBeditaSignup()`

useBeditaSignup() gives access to signup functions.

If enabled it uses reCAPTCHA v3.

signup(data: SignupBeditaBody) execute BEdita signup.

<script setup>
const { signup } = useBeditaSignup();

const username = ref('');
const password = ref('');
const email = ref('');

const submit = async () => {
  try {
    await signup({
      username: username.value,
      password: password.value,
      email: email.value,
    });
  } catch (e) {
    // handle error
  }
}
</script>

<template>
  <div>
    <h2>Signup page</h2>
    <form>
      <input v-model="email" type="email" placeholder="email" required>
      <input v-model="username" type="text" placeholder="username" required>
      <input v-model="password" type="password" placeholder="password" required>
      <button @click.prevent="submit()">Signup</button>
    </form>
  </div>
</template>

`signupActivation`

signupActivation(uuid?: string, server?: boolean) execute BEdita signup activation.

<script setup>
const { signupActivation } = useBeditaSignup();

const { pending, error } = await signupActivation();
</script>

<template>
  <div>
    <p v-if="pending">Activation in progress...</p>
    <p v-else-if="error" style="color: red">An error occured. {{ error }}</p>
    <p v-else class="text-center">Account activated.</p>
  </div>
</template>

`useBeditaRecaptcha()`

useBeditaRecaptcha() gives access to reCAPTCHA v3 to protect forms.

It should be used in conjunction with server side function recaptchaVerifyToken(token: string, action: string, throwError = true).

`executeRecaptcha`

executeRecaptcha(action: string) retrieve reCAPTCHA token ready to send to server.

<script setup>
  const { executeRecaptcha } = useBeditaRecaptcha();
  const name = ref('');

  const onSubmit = async () => {
    try {
      const recaptcha_token = await executeRecaptcha('add-name');
      await $fetch('/api/custom-action', { // in "/server/api/custom-action.ts" we need to check token with recaptchaVerifyToken()
        method: 'POST',
        body: {
          name: name.value,
          recaptcha_token,
        },
      });
    } catch (e) {
      // handle error
    }
  };
</script>

<template>
  <div>
    <form>
      <input type="text" v-model="name">
      <button @click.prevent="onSubmit">Add</button>
    </form>
  </div>
</template>

FeaturesMiddleware