diff --git a/docs/references/vue/use-auth.mdx b/docs/references/vue/use-auth.mdx index b08a0e9778..f3b8cfa5c8 100644 --- a/docs/references/vue/use-auth.mdx +++ b/docs/references/vue/use-auth.mdx @@ -5,17 +5,7 @@ description: Access and manage authentication state in your Vue application with The `useAuth()` composable provides access to the current authentication state and methods to manage the active session in your Vue application. -## Usage - -```vue - -``` - -## Return values +## `useAuth()` returns - `isLoaded` @@ -87,9 +77,9 @@ const { isSignedIn, getToken } = useAuth() A function that returns a boolean indicating whether the user has specific permissions or roles. See the [reference doc](/docs/references/javascript/auth-object#has). -## Example +## How to use the `useAuth()` composable -The following example demonstrates how to use `useAuth()` to access the authentication state, protect a page, and fetch data from an external API: +Use `useAuth()` to access the authentication state, protect a page, and fetch data from an external API: ```vue {{ filename: 'App.vue' }} -``` - -```ts -function useSignIn(): { - isLoaded: Ref - signIn: Ref - setActive: Ref<(params: SetActiveParams) => Promise> -} -``` - -## Reference - -### Return values +## `useSignIn()` returns - `isLoaded` @@ -48,9 +28,7 @@ function useSignIn(): { An object that contains the current sign-in attempt status and methods to create a new sign-in attempt. -### Types - -#### `SetActiveParams` +### `SetActiveParams` - `session` @@ -73,7 +51,27 @@ function useSignIn(): { Callback run just before the active session and/or organization is set to the passed object. Can be used to set up for pre-navigation actions. -#### `SignIn` status values +## How to use the `useSignIn()` composable + +Use `useSignIn()` to check the current sign-in status and display the value in the UI. + +```vue {{ filename: 'SignInPage.vue' }} + + + +``` + +### `SignIn` status values The `status` property of the `SignIn` object can be one of the following values: @@ -111,25 +109,3 @@ The `status` property of the `SignIn` object can be one of the following values: The user needs to set a new password. - -## Example - -### Check and show sign-in status - -The following example checks the current sign-in status and displays the value in the UI. - -```vue {{ filename: 'SignInPage.vue' }} - - - -``` diff --git a/docs/references/vue/use-user.mdx b/docs/references/vue/use-user.mdx index b4b487e48a..db3b32e959 100644 --- a/docs/references/vue/use-user.mdx +++ b/docs/references/vue/use-user.mdx @@ -5,27 +5,7 @@ description: Access and manage the current user's data in your Vue application w The `useUser()` composable provides access to the current user's [`User`](/docs/references/javascript/user/user) object, which contains all the data for a single user in your application and provides methods to manage their account. This composable also allows you to check if the user is signed in and if Clerk has loaded and initialized. -## Usage - -```vue - -``` - -```ts -function useUser(): { - isLoaded: Ref - user: Ref - isSignedIn: Ref -} -``` - -## Reference - -### Return values +## `useUser()` returns - `isLoaded` @@ -48,7 +28,7 @@ function useUser(): { A boolean that returns `true` if the user is signed in. -## Examples +## How to use the `useUser()` composable ### Get the current user @@ -74,7 +54,7 @@ const { isSignedIn, user, isLoaded } = useUser() ### Update user data -Use [`update()`](/docs/references/javascript/user/user#update) to update the current user's information: +Use [`update()`](/docs/references/javascript/user/user#update) to update the current user's information. ```vue {{ filename: 'UpdateUser.vue' }}