Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

(chore) align React and Vue docs; align prop/param descriptions #1814

Merged
merged 24 commits into from
Dec 19, 2024
Merged
Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
a81b126
remove section
victoriaxyz Dec 16, 2024
583af6f
update
victoriaxyz Dec 16, 2024
a17b4b0
Merge branch 'main' into vi/align-react-vue-docs
victoriaxyz Dec 16, 2024
dceb610
Merge branch 'main' into vi/align-react-vue-docs
victoriaxyz Dec 16, 2024
4459796
Merge branch 'main' into vi/align-react-vue-docs
victoriaxyz Dec 17, 2024
b3e008f
Apply suggestions from code review
victoriaxyz Dec 17, 2024
99b1ec5
Update docs/references/react/use-sign-in.mdx
victoriaxyz Dec 17, 2024
872d48e
put back section
victoriaxyz Dec 18, 2024
b0a6c9a
align text
victoriaxyz Dec 18, 2024
b84088a
fix example
victoriaxyz Dec 18, 2024
be8c571
update example intros
victoriaxyz Dec 18, 2024
ec2915a
Update docs/references/react/use-auth.mdx
victoriaxyz Dec 18, 2024
826b80d
add example button to fetch data
victoriaxyz Dec 18, 2024
b319130
Update docs/references/react/use-sign-in.mdx
victoriaxyz Dec 18, 2024
70af8fe
put back sections for custom sign-in and sign-up flows
victoriaxyz Dec 18, 2024
68a0e44
fix code filenames to match quickstart
victoriaxyz Dec 18, 2024
979b9d7
Merge branch 'main' into vi/align-react-vue-docs
victoriaxyz Dec 18, 2024
0fdc7d0
(chore) update prop/param descriptions to be consistent (#1824)
alexisintech Dec 18, 2024
3aba56d
Merge branch 'main' into vi/align-react-vue-docs
victoriaxyz Dec 18, 2024
b22b523
Update docs/references/react/use-clerk.mdx
victoriaxyz Dec 19, 2024
d241fcb
fix useAuth() code example intro
victoriaxyz Dec 19, 2024
bce575f
match useSignIn() intro
victoriaxyz Dec 19, 2024
87d4aa7
Update docs/references/react/use-auth.mdx
alexisintech Dec 19, 2024
43e0ef9
Merge branch 'main' into vi/align-react-vue-docs
victoriaxyz Dec 19, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 0 additions & 19 deletions docs/quickstarts/react.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -199,22 +199,3 @@ React Router can be integrated with Clerk in two ways:

- As a framework: Use Clerk's built-in [React Router integration](/docs/quickstarts/react-router)
- As a library: Manually integrate React Router into your Clerk application using [library mode](/docs/references/react-router/library-mode)

## More resources
alexisintech marked this conversation as resolved.
Show resolved Hide resolved

Learn more about Clerk components, how to customize them, and how to use Clerk's client-side helpers using the following guides.

<Cards>
- [Prebuilt components](/docs/components/overview)
- Learn more about Clerk's suite of components that let you quickly add authentication to your app.

---

- [Customization & localization](/docs/customization/overview)
- Learn how to customize and localize Clerk components.

---

- [Client-side helpers (hooks)](/docs/references/react/use-user)
- Learn more about Clerk's client-side helpers and how to use them.
</Cards>
4 changes: 2 additions & 2 deletions docs/references/react-router/get-auth.mdx
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
---
title: '`getAuth()`'
description: The getAuth() helper retrieves authentication state from the request object.
description: Access and manage the current user's authentication state in your React application with Clerk's getAuth() helper.
---

The `getAuth()` helper retrieves authentication state from the request object.
The `getAuth()` helper retrieves the current user's authentication state from the request object.

## Parameters

Expand Down
61 changes: 32 additions & 29 deletions docs/references/react/use-auth.mdx
Original file line number Diff line number Diff line change
@@ -1,111 +1,114 @@
---
title: '`useAuth()`'
description: Clerk's useAuth() hook is a convenient way to access the current auth state.
description: Access and manage authentication state in your React application with Clerk's useAuth() hook.
---

The `useAuth()` hook provides information about the current auth state, as well as helper methods to manage the current active session.
The `useAuth()` hook provides access to the current authentication state and methods to manage the active session in your React application.
victoriaxyz marked this conversation as resolved.
Show resolved Hide resolved

## `useAuth()` returns
## Returns

<Properties>
- `isSignedIn`
- `isLoaded`
- `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`
- `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`
- `string`

The current user's ID.
The unique identifier for the current user.
alexisintech marked this conversation as resolved.
Show resolved Hide resolved

---

- `sessionId`
- `string`

The current user's session ID.
The unique identifier for the current session.

---

- `orgId`
- `string`

The current user's active organization ID.
The unique identifier for the user's active organization.

---

- `orgRole`
- `string`

The current user's active organization role.
The current user's role in their active organization.

---

- `orgSlug`
- `string`

The current user's organization slug.
The URL-friendly identifier of the user's active organization.

---

- `signOut()`
- `(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 signs out the current user. Returns a promise that resolves when complete. See the [reference doc](/docs/references/javascript/clerk/clerk#sign-out).
victoriaxyz marked this conversation as resolved.
Show resolved Hide resolved

- `getToken()`
- `(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 retrieves the current user's session token or a custom JWT template. Returns a promise that resolves to the token. See the [reference doc](/docs/references/javascript/session#get-token).

---

- `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.
A function that checks if the user has specific permissions or roles. See the [reference doc](/docs/references/nextjs/auth-object#has).
</Properties>

## How to use the `useAuth()` hook

> [!NOTE]
> For Next.js apps, it's recommended to use the [`auth()`](/docs/references/nextjs/auth) helper instead of the `useAuth()` hook. Since `auth()` is used in server components, you'll need to pass the auth data to Client Components as needed. If you prefer to use the `useAuth()` hook, pass the `dynamic` prop to the `<ClerkProvider>` component, but note that this switches the app to dynamic rendering. Learn more [here](/docs/references/nextjs/rendering-modes).
> For Next.js applications, it's recommended to use the [`auth()`](/docs/references/nextjs/auth) helper instead of `useAuth()`. Since `auth()` works in server components, you'll need to pass auth data to Client Components as needed. If you prefer `useAuth()`, enable it by passing the `dynamic` prop to `<ClerkProvider>`, but be aware this switches to dynamic rendering. Learn more [here](/docs/references/nextjs/rendering-modes).
victoriaxyz marked this conversation as resolved.
Show resolved Hide resolved

The following example demonstrates how to use the `useAuth()` hook 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.
Use `useAuth()` to access the authentication state and fetch data using a session token:
alexisintech marked this conversation as resolved.
Show resolved Hide resolved

```tsx {{ filename: 'external-data-page.tsx' }}
```tsx {{ filename: 'ExternalDataPage.tsx' }}
import { useAuth } from '@clerk/clerk-react'

export default function ExternalDataPage() {
const { getToken, isLoaded, isSignedIn } = useAuth()

const fetchExternalData = async () => {
const token = await getToken()

// Fetch data from an external API
const response = await fetch('https://api.example.com/data', {
headers: {
Authorization: `Bearer ${token}`,
},
})

return response.json()
}

if (!isLoaded) {
// Handle loading state however you like
return <div>Loading...</div>
}

if (!isSignedIn) {
// Handle signed out state however you like
return <div>Sign in to view this page</div>
}

const fetchDataFromExternalResource = async () => {
const token = await getToken()
// Add logic to fetch your data
return data
}

return <div>...</div>
return <div>{/* Add your component content here */}</div>
alexisintech marked this conversation as resolved.
Show resolved Hide resolved
}
```
12 changes: 6 additions & 6 deletions docs/references/react/use-clerk.mdx
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
---
title: '`useClerk()`'
description: Clerk's useClerk() hook is used to access the Clerk object, which can be used to build alternatives to any Clerk Component.
description: Access and manage the Clerk object in your React application with Clerk's useClerk() hook.
---

The `useClerk()` hook 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.
> This composable should only be used for advanced use cases, such as building a completely custom OAuth flow or as an escape hatch to access to the `Clerk` object.

The `useClerk()` hook provides access to the [`Clerk`](/docs/references/javascript/clerk/clerk) object, allowing you to build alternatives to any Clerk Component.

## `useClerk()` returns
## Returns

The `useClerk()` hook 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()` hook

```tsx {{ filename: 'home.tsx' }}
```tsx {{ filename: 'src/Home.tsx' }}
alexisintech marked this conversation as resolved.
Show resolved Hide resolved
import { useClerk } from '@clerk/clerk-react'

export default function Home() {
Expand Down
8 changes: 4 additions & 4 deletions docs/references/react/use-organization-list.mdx
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
---
title: '`useOrganizationList()`'
description: Clerk's useOrganizationList() hook is used to access methods for switching between active organizations and for listing the user's organization memberships, invitations, and suggestions.
description: Access and manage the current user's organization list in your React application with Clerk's useOrganizationList() hook.
---

The `useOrganizationList()` hook allows you to retrieve the organization memberships, invitations, or suggestions for an active user. It also provides methods for creating an organization and setting the active organization.
The `useOrganizationList()` hook provides access to the current user's organization memberships, invitations, and suggestions. It also includes methods for creating new organizations and managing the active organization.

## `useOrganizationList()` parameters
## Parameters

`useOrganizationList()` accepts a single object with the following properties:

Expand Down Expand Up @@ -84,7 +84,7 @@ type OrganizationSuggestionStatus = 'pending' | 'accepted'
- `isLoaded`
- `boolean`

A boolean is set to `false` until Clerk loads and initializes. Once Clerk loads, `isLoaded` will be set to `true`.
A boolean that indicates whether Clerk has completed initialization. Initially `false`, becomes `true` once Clerk loads.

---

Expand Down
Loading
Loading