diff --git a/docs/references/vue/use-auth.mdx b/docs/references/vue/use-auth.mdx new file mode 100644 index 0000000000..be0eb61247 --- /dev/null +++ b/docs/references/vue/use-auth.mdx @@ -0,0 +1,102 @@ +--- +title: '`useAuth()`' +description: Clerk's useAuth() composable is a convenient way to access the current auth state. +--- + +The `useAuth()` composable provides information about the current auth state, as well as helper methods to manage the current active session. + +## `useAuth()` returns + + + - `isSignedIn` + - `boolean` + + A boolean that returns true if the user is signed in. + + --- + + - `isLoaded` + - `boolean` + + A boolean that until Clerk loads and initializes, will be set to `false`. Once Clerk loads, `isLoaded` will be set to `true`. + + --- + + - `userId` + - `string` + + The current user's ID. + + --- + + - `sessionId` + - `string` + + The current user's session ID. + + --- + + - `orgId` + - `string` + + The current user's active organization ID. + + --- + + - `orgRole` + - `string` + + The current user's active organization role. + + --- + + - `orgSlug` + - `string` + + The current user's organization slug. + + --- + + - `signOut()` + - `(options?: SignOutOptions) => Promise` + + A function that signs the user out. See the [reference documentation](/docs/references/javascript/clerk/clerk#sign-out) for more information. + + --- + + - `getToken()` + - `(options?: GetTokenOptions) => Promise` + + 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. + + --- + + - `has()` + - `(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. + + +## How to use the `useAuth()` composable + +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. + +```vue {{ filename: 'external-data-page.vue' }} + + + +``` diff --git a/docs/references/vue/use-clerk.mdx b/docs/references/vue/use-clerk.mdx new file mode 100644 index 0000000000..32c12a7964 --- /dev/null +++ b/docs/references/vue/use-clerk.mdx @@ -0,0 +1,27 @@ +--- +title: '`useClerk()`' +description: Clerk's useClerk() composable is used to access the Clerk object, which can be used to build alternatives to any Clerk Component. +--- + +The `useClerk()` composable is a convenient way to access to the [`Clerk`](/docs/references/javascript/clerk/clerk) object, giving you the ability to build alternatives to any Clerk Component. + +> [!WARNING] +> This is intended to be used for advanced use cases, like building a completely custom OAuth flow or as an escape hatch for getting access to the `Clerk` object. + +## `useClerk()` returns + +The `useClerk()` composable returns the `Clerk` object, which includes all the methods and properties listed in the [`Clerk` reference](/docs/references/javascript/clerk/clerk). + +## How to use the `useClerk()` composable + +```vue {{ filename: 'home.vue' }} + + +