Clerk Authentication

import { const useClerk: () => LoadedClerkuseClerk, const ClerkProvider: React.ComponentType<ClerkProviderProps>ClerkProvider } from '@clerk/clerk-react';
import { 
const JazzReactProviderWithClerk: <S extends (AccountClass<Account> & CoValueFromRaw<Account>) | CoreAccountSchema>(props: {
    clerk: MinimalClerkClient;
} & JazzProviderProps<S>) => string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<...> | Iterable<React.ReactNode> | null | undefined> | JSX.Element | nullJazzReactProviderWithClerk } from "jazz-tools/react";

function 
function JazzProvider({ children }: {
    children: React.ReactNode;
}): React.JSX.ElementJazzProvider({ children: React.ReactNodechildren }: { children: React.ReactNodechildren: React.type React.ReactNode = string | number | bigint | boolean | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal | Promise<...> | null | undefined
Represents all of the things React can render.

Where 
{@link 
ReactElement
}
 only represents JSX, `ReactNode` represents everything that can be rendered.
@see{@link https://react-typescript-cheatsheet.netlify.app/docs/react-types/reactnode/ React TypeScript Cheatsheet}@example```tsx
// Typing children
type Props = { children: ReactNode }

const Component = ({ children }: Props) => <div>{children}</div>

<Component>hello</Component>
```@example```tsx
// Typing a custom element
type Props = { customElement: ReactNode }

const Component = ({ customElement }: Props) => <div>{customElement}</div>

<Component customElement={<div>hello</div>} />
```ReactNode }) {
  const const clerk: LoadedClerkclerk = function useClerk(): LoadedClerkuseClerk();

  return (
    <
const JazzReactProviderWithClerk: <S extends (AccountClass<Account> & CoValueFromRaw<Account>) | CoreAccountSchema>(props: {
    clerk: MinimalClerkClient;
} & JazzProviderProps<S>) => string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<...> | Iterable<React.ReactNode> | null | undefined> | JSX.Element | nullJazzReactProviderWithClerk
      clerk: MinimalClerkClientclerk={const clerk: LoadedClerkclerk}
      sync: SyncConfigsync={{
        peer: "wss://cloud.jazz.tools/?key=you@example.com"peer: `wss://cloud.jazz.tools/?key=${const apiKey: "you@example.com"
Use your email as a temporary key, or get a free
API Key at dashboard.jazz.tools for higher limits.
@linkhttps://dashboard.jazz.toolsapiKey}`,
      }}
    >
      {children: React.ReactNodechildren}
    </
const JazzReactProviderWithClerk: <S extends (AccountClass<Account> & CoValueFromRaw<Account>) | CoreAccountSchema>(props: {
    clerk: MinimalClerkClient;
} & JazzProviderProps<S>) => string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<...> | Iterable<React.ReactNode> | null | undefined> | JSX.Element | nullJazzReactProviderWithClerk>
  );
}

function createRoot(container: Container, options?: RootOptions): Root
createRoot lets you create a root to display React components inside a browser DOM node.
@see{@link https://react.dev/reference/react-dom/client/createRoot API Reference for `createRoot`}createRoot(var document: Document
[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.getElementById(elementId: string): HTMLElement | null
Returns a reference to the first object with the specified value of the ID attribute.
@paramelementId String that specifies the ID value.getElementById("root")!).Root.render(children: React.ReactNode): voidrender(
  <const ClerkProvider: React.ComponentType<ClerkProviderProps>ClerkProvider publishableKey: string
The Clerk publishable key for your instance
@noteThis can be found in your Clerk Dashboard on the [API Keys](https://dashboard.clerk.com/last-active?path=api-keys) pagepublishableKey={const PUBLISHABLE_KEY: "fake_key"PUBLISHABLE_KEY} afterSignOutUrl: stringafterSignOutUrl="/">
    <
function JazzProvider({ children }: {
    children: React.ReactNode;
}): React.JSX.ElementJazzProvider>
      <function App(): React.JSX.ElementApp />
    </
function JazzProvider({ children }: {
    children: React.ReactNode;
}): React.JSX.ElementJazzProvider>
  </const ClerkProvider: React.ComponentType<ClerkProviderProps>ClerkProvider>
);

import { 
const SignInButton: {
    (props: Without<WithClerkProp<SignInButtonProps>, "clerk">): React.JSX.Element | null;
    displayName: string;
}SignInButton } from "@clerk/clerk-react";
import { function useIsAuthenticated(): booleanuseIsAuthenticated, function useLogOut(): () => void
Returns a function for logging out of the current account.useLogOut } from "jazz-tools/react";

export function function AuthButton(): React.JSX.ElementAuthButton() {
  const const logOut: () => voidlogOut = function useLogOut(): () => void
Returns a function for logging out of the current account.useLogOut();

  const const isAuthenticated: booleanisAuthenticated = function useIsAuthenticated(): booleanuseIsAuthenticated();

  if (const isAuthenticated: booleanisAuthenticated) {
    return <React.JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>button React.DOMAttributes<HTMLButtonElement>.onClick?: React.MouseEventHandler<HTMLButtonElement> | undefinedonClick={() => const logOut: () => voidlogOut()}>Logout</React.JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>button>;
  }

  return <
const SignInButton: {
    (props: Without<WithClerkProp<SignInButtonProps>, "clerk">): React.JSX.Element | null;
    displayName: string;
}SignInButton />;
}