From 1306a271d0179d6a08d6f1d412e2c196c54e1c12 Mon Sep 17 00:00:00 2001 From: Alexis Aguilar <98043211+alexisintech@users.noreply.github.com> Date: Mon, 16 Dec 2024 16:24:57 -0500 Subject: [PATCH 1/3] (/custom-flows/error-handling) update guide (#1810) --- docs/custom-flows/error-handling.mdx | 93 +++++++++++----------------- 1 file changed, 35 insertions(+), 58 deletions(-) diff --git a/docs/custom-flows/error-handling.mdx b/docs/custom-flows/error-handling.mdx index 93fff4fa07..5884b84816 100644 --- a/docs/custom-flows/error-handling.mdx +++ b/docs/custom-flows/error-handling.mdx @@ -5,8 +5,6 @@ description: Provide your users with useful information about the errors being r Clerk-related errors are returned as an array of [`ClerkAPIError`](/docs/references/javascript/types/clerk-api-error) objects. These errors contain a `code`, `message`, `longMessage` and `meta` property. These properties can be used to provide your users with useful information about the errors being returned from sign-up and sign-in requests. -This guide demonstrates how to handle Clerk-related errors when building custom flows. - > [!TIP] > To see a list of all possible errors, refer to the [Errors](/docs/errors/overview) documentation. @@ -18,7 +16,7 @@ The following example uses the [email & password sign-in custom flow](/docs/cust This example is written for Next.js App Router but it can be adapted for any React meta framework, such as Remix. - ```tsx {{ filename: 'app/sign-in/[[...sign-in]]/page.tsx' }} + ```tsx {{ filename: 'app/sign-in/[[...sign-in]]/page.tsx', mark: [[6, 7], 13, [21, 22], [45, 48], [79, 85]] }} 'use client' import * as React from 'react' @@ -39,7 +37,7 @@ The following example uses the [email & password sign-in custom flow](/docs/cust const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() - // clear any errors that may have occured during previous form submission + // Clear any errors that may have occurred during previous form submission setErrors(undefined) if (!isLoaded) { @@ -48,21 +46,20 @@ The following example uses the [email & password sign-in custom flow](/docs/cust // Start the sign-in process using the email and password provided try { - const completeSignIn = await signIn.create({ + const signInAttempt = await signIn.create({ identifier: email, password, }) - // This is mainly for debugging while developing. - if (completeSignIn.status !== 'complete') { - console.log(JSON.stringify(completeSignIn, null, 2)) - } - // If sign-in process is complete, set the created session as active // and redirect the user - if (completeSignIn.status === 'complete') { - await setActive({ session: completeSignIn.createdSessionId }) + if (signInAttempt.status === 'complete') { + await setActive({ session: signInAttempt.createdSessionId }) router.push('/') + } else { + // If the status is not complete, check why. User may need to + // complete further steps. + console.error(JSON.stringify(signInAttempt, null, 2)) } } catch (err) { if (isClerkAPIResponseError(err)) setErrors(err.errors) @@ -113,7 +110,7 @@ The following example uses the [email & password sign-in custom flow](/docs/cust - ```html {{ filename: 'index.html' }} + ```html {{ filename: 'index.html', mark: [22] }} @@ -124,24 +121,17 @@ The following example uses the [email & password sign-in custom flow](/docs/cust
-
-

Sign up

-
+
+

Sign in

+ - + - +
- -

@@ -149,7 +139,7 @@ The following example uses the [email & password sign-in custom flow](/docs/cust ``` - ```js {{ filename: 'main.js' }} + ```js {{ filename: 'main.js', mark: [[43, 49]] }} import { Clerk } from '@clerk/clerk-js' const pubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY @@ -160,15 +150,15 @@ The following example uses the [email & password sign-in custom flow](/docs/cust if (clerk.user) { // Mount user button component document.getElementById('signed-in').innerHTML = ` -
- ` +
+ ` const userbuttonDiv = document.getElementById('user-button') clerk.mountUserButton(userbuttonDiv) } else { - // Handle the sign-up form - document.getElementById('sign-up-form').addEventListener('submit', async (e) => { + // Handle the sign-in form + document.getElementById('sign-in-form').addEventListener('submit', async (e) => { e.preventDefault() const formData = new FormData(e.target) @@ -176,36 +166,23 @@ The following example uses the [email & password sign-in custom flow](/docs/cust const password = formData.get('password') try { - // Start the sign-up process using the phone number method - await clerk.client.signUp.create({ emailAddress, password }) - await clerk.client.signUp.prepareEmailAddressVerification() - // Hide sign-up form - document.getElementById('sign-up').setAttribute('hidden', '') - // Show verification form - document.getElementById('verifying').removeAttribute('hidden') - } catch (err) { - if (isClerkAPIResponseError(err)) { - const errors = err.errors - document.getElementById('error').textContent = errors[0].longMessage - } - console.error(JSON.stringify(err, null, 2)) - } - }) - - // Handle the verification form - document.getElementById('verifying').addEventListener('submit', async (e) => { - const formData = new FormData(e.target) - const code = formData.get('code') - - try { - // Verify the phone number - const verify = await clerk.client.signUp.attemptEmailAddressVerification({ - code, + // Start the sign-in process + const signInAttempt = await clerk.client.signIn.create({ + identifier: emailAddress, + password, }) - // Now that the user is created, set the session to active. - await clerk.setActive({ session: verify.createdSessionId }) - } catch (err) { + // If the sign-in is complete, set the user as active + if (signInAttempt.status === 'complete') { + await clerk.setActive({ session: signInAttempt.createdSessionId }) + + location.reload() + } else { + // If the status is not complete, check why. User may need to + // complete further steps. + console.error(JSON.stringify(signInAttempt, null, 2)) + } + } catch (error) { if (isClerkAPIResponseError(err)) { const errors = err.errors document.getElementById('error').textContent = errors[0].longMessage From 8964facbe06fe64578f718057e65c7ccd23e8529 Mon Sep 17 00:00:00 2001 From: Jeff Escalante Date: Mon, 16 Dec 2024 16:30:35 -0500 Subject: [PATCH 2/3] Add controls to "how clerk works" videos (#1812) --- docs/how-clerk-works/overview.mdx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/docs/how-clerk-works/overview.mdx b/docs/how-clerk-works/overview.mdx index e5b610b1e8..be32a6f9af 100644 --- a/docs/how-clerk-works/overview.mdx +++ b/docs/how-clerk-works/overview.mdx @@ -80,6 +80,7 @@ A user's process of signing in would work as follows. This example assumes that muted loop playsInline + controls /> 1. The next time the browser sends a request to the server, it [automatically includes](/docs/how-clerk-works/cookies) the session cookie. The server checks the database for the session ID and retrieves the associated user ID and session metadata. If the session is valid and active, the server has verified that the user has authenticated, and can then use the user ID to fetch any required user data and process the request.