docs(get-started): add reset password section (#499)

Co-authored-by: Baptiste Leproux <[email protected]>

Author: Baroshem

docs/content/1.getting-started/2.authentication.md

@@ -107,3 +107,94 @@ watch(user, () => {
 ::tip
 If you want to manually set the redirect path, you can do so by disabling [`saveRedirectToCookie`](/getting-started/introduction#redirectoptions), and then set the value using the [`useSupabaseCookieRedirect`](/composables/usesupabasecookieredirect) composable directly.
 ::
+
+## Reset Password
+
+You can easily handle password reset request for the user. The flow consist of 2 steps:
+
+::steps
+
+#### Allow the user to login via the password reset link. When the user clicks the reset link in the email they are redirected back to your application.
+
+```vue [pages/password/reset.vue]
+<script setup lang="ts">
+const supabase = useSupabaseClient()
+const email = ref('')
+
+const requestResetPassword = async () => {
+  const { data, error } = await supabase.auth.resetPasswordForEmail(email.value, {
+    redirectTo: 'https://example.com/password/update',
+  })
+  if (error) console.log(error)
+}
+</script>
+
+<template>
+  <div>
+    <input
+      v-model="email"
+      type="email"
+    />
+    <button @click="requestResetPassword">
+      Reset Password
+    </button>
+  </div>
+</template>
+```
+
+::tip
+You can configure the URL that the user is redirected to with the `redirectTo` parameter. 
+::
+
+#### After the user has been redirected successfully, prompt them for a new password and call `updateUser()`
+
+```vue [pages/password/update.vue]
+<script setup lang="ts">
+const supabase = useSupabaseClient()
+const newPassword = ref('')
+
+const updateUserPassword = async () => {
+  const { data, error } = await supabase.auth.updateUser({
+    password: newPassword.value
+  })
+  if (error) console.log(error)
+}
+</script>
+
+<template>
+  <div>
+    <input
+      v-model="newPassword"
+      type="password"
+    />
+    <button @click="updateUserPassword">
+      Update Password
+    </button>
+  </div>
+</template>
+```
+
+::
+
+You can also watch for the event `PASSWORD_RECOVERY` that will be emitted when the password recovery link is clicked. You can use `onAuthStateChange()` to listen and invoke a callback function on these events.
+
+```vue [pages/password/update.vue]
+<script setup lang="ts">
+const supabase = useSupabaseClient()
+const password = generateRandomPassword()
+
+watch(newPassword, () => {
+  supabase.auth.onAuthStateChange(async (event, session) => {
+    if (event == "PASSWORD_RECOVERY") {
+      const { data, error } = await supabase.auth
+        .updateUser({ password })
+
+      if (data) alert("Password updated successfully!")
+      if (error) alert("There was an error updating your password.")
+    }
+  })
+</script>
+```
+
+If you want to learn more about it, you can read this [section](https://supabase.com/docs/reference/javascript/auth-resetpasswordforemail).
+