-
Notifications
You must be signed in to change notification settings - Fork 484
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
aa41549
commit e6a9deb
Showing
4 changed files
with
166 additions
and
86 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,102 +1,121 @@ | ||
| --- | ||
| title: '`useAuth()`' | ||
| description: Clerk's useAuth() composable is a convenient way to access the current auth state. | ||
| description: Access and manage authentication state in your Vue application with Clerk's useAuth() composable. | ||
| --- | ||
|
|
||
| The `useAuth()` composable provides information about the current auth state, as well as helper methods to manage the current active session. | ||
| The `useAuth()` composable provides access to the current authentication state and methods to manage the active session in your Vue application. | ||
|
|
||
| ## `useAuth()` returns | ||
| ## Usage | ||
|
|
||
| ```vue | ||
| <script setup> | ||
| import { useAuth } from '@clerk/vue' | ||
| const { isSignedIn, getToken } = useAuth() | ||
| </script> | ||
| ``` | ||
|
|
||
| ## Return values | ||
|
|
||
| <Properties> | ||
| - `isSignedIn` | ||
| - `isLoaded` | ||
| - `Ref<boolean>` | ||
|
|
||
| A boolean that returns true if the user is signed in. | ||
| A boolean that indicates whether Clerk has completed initialization. Initially `false`, becomes `true` once Clerk loads. | ||
|
|
||
| --- | ||
|
|
||
| - `isLoaded` | ||
| - `isSignedIn` | ||
| - `Ref<boolean>` | ||
|
|
||
| A boolean that until Clerk loads and initializes, will be set to `false`. Once Clerk loads, `isLoaded` will be set to `true`. | ||
| A boolean that indicates whether a user is currently signed in. | ||
|
|
||
| --- | ||
|
|
||
| - `userId` | ||
| - `Ref<string>` | ||
|
|
||
| The current user's ID. | ||
| The unique identifier of the current user. | ||
|
|
||
| --- | ||
|
|
||
| - `sessionId` | ||
| - `Ref<string>` | ||
|
|
||
| The current user's session ID. | ||
| The unique identifier of the current session. | ||
|
|
||
| --- | ||
|
|
||
| - `orgId` | ||
| - `Ref<string>` | ||
|
|
||
| The current user's active organization ID. | ||
| The unique identifier of the user's active organization. | ||
|
|
||
| --- | ||
|
|
||
| - `orgRole` | ||
| - `Ref<string>` | ||
|
|
||
| The current user's active organization role. | ||
| The current user's role in their active organization. | ||
|
|
||
| --- | ||
|
|
||
| - `orgSlug` | ||
| - `Ref<string>` | ||
|
|
||
| The current user's organization slug. | ||
| The URL-friendly identifier of the user's active organization. | ||
|
|
||
| --- | ||
|
|
||
| - `signOut()` | ||
| - `Ref<(options?: SignOutOptions) => Promise<void>>` | ||
|
|
||
| A function that signs the user out. See the [reference documentation](/docs/references/javascript/clerk/clerk#sign-out) for more information. | ||
| A function that returns a promise that resolves when the current user is signed out. See the [reference doc](/docs/references/javascript/clerk/clerk#sign-out). | ||
|
|
||
| --- | ||
|
|
||
| - `getToken()` | ||
| - `Ref<(options?: GetTokenOptions) => Promise<string | null>>` | ||
|
|
||
| A function that returns a promise that resolves to the current user's session token. Can also be used to retrieve a custom JWT template. See the [reference documentation](/docs/references/javascript/session#get-token) for more information. | ||
| A function that returns a promise that resolves to the current user's session token. Can also retrieve a custom JWT template. See the [reference doc](/docs/references/javascript/session#get-token). | ||
|
|
||
| --- | ||
|
|
||
| - `has()` | ||
| - `Ref<(isAuthorizedParams: CheckAuthorizationParamsWithCustomPermissions) => boolean>` | ||
|
|
||
| A function that returns a boolean based on the permission or role provided as parameter. Can be used for authorization. See the [reference documentation](/docs/references/nextjs/auth-object#has){{ target: '_blank' }} for more information. | ||
| 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). | ||
| </Properties> | ||
|
|
||
| ## How to use the `useAuth()` composable | ||
| ## Example | ||
|
|
||
| The following example demonstrates how to use the `useAuth()` composable to access the current auth state, like whether the user is signed in or not. It also demonstrates a basic example of how you could use the `getToken()` method to retrieve a session token for fetching data from an external resource. | ||
| The following example demonstrates how to use `useAuth()` to access the authentication state, protect a page, and fetch data from an external API: | ||
|
|
||
| ```vue {{ filename: 'external-data-page.vue' }} | ||
| ```vue {{ filename: 'App.vue' }} | ||
| <script setup> | ||
| import { useAuth } from '@clerk/vue' | ||
| const { getToken, isLoaded, isSignedIn } = useAuth() | ||
| const fetchDataFromExternalResource = async () => { | ||
| const fetchProtectedData = async () => { | ||
| const token = await getToken.value() | ||
| // Add logic to fetch your data | ||
| return data | ||
| // Fetch data from an external API | ||
| const response = await fetch('https://api.example.com/data', { | ||
| headers: { | ||
| Authorization: `Bearer ${token}`, | ||
| }, | ||
| }) | ||
| return response.json() | ||
| } | ||
| </script> | ||
| <template> | ||
| <div v-if="!isLoaded">Loading...</div> | ||
| <div v-else-if="!isSignedIn">Sign in to view this page</div> | ||
| <div v-else>...</div> | ||
| <div v-else> | ||
| <!-- Your protected content here --> | ||
| </div> | ||
| </template> | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.