Commit e6b52ae

<h1 align="center">

Official Clerk JavaScript SDKs

</h1>

<p align="center">

<strong>

Clerk helps developers build user management. We provide streamlined user experiences for your users to sign up, sign in, and manage their profile.

</strong>

</p>

This repository contains all the Clerk JavaScript SDKs under the `@clerk` namespace. Visit [clerk.com](https://clerk.com) to signup for an account.

1. [Sign up for an account](https://dashboard.clerk.com/sign-up?utm_source=github&utm_medium=clerk_js_repo_readme)

1. Create an application in your Clerk dashboard

1. Spin up a new codebase with one of the [quickstart guides](https://clerk.com/docs/quickstarts/overview?utm_source=github&utm_medium=clerk_js_repo_readme)

This repository contains the SDKs for environment/platforms that Clerk supports. For example, if you want to use Clerk with Node.js you can install:

pnpm add @clerk/clerk-sdk-node

Clerk's full documentation is available at [clerk.com/docs](https://clerk.com/docs?utm_source=github&utm_medium=clerk_js_repo_readme).

- **We recommend starting with the [Quickstart guides](https://clerk.com/docs/quickstarts/overview).** It'll enable you to quickly add Clerk to your application. If you're starting a new project and are not sure what to pick, use [Next.js](https://nextjs.org/docs/getting-started/installation) and [@clerk/nextjs](https://clerk.com/docs/quickstarts/nextjs).

- **To learn more about Clerk's components and features, checkout the rest of the [Clerk documentation](https://clerk.com/docs?utm_source=github&utm_medium=clerk_js_repo_readme).** You'll be able to e.g. browse the [component reference](https://clerk.com/docs/components/overview?utm_source=github&utm_medium=clerk_js_repo_readme) page.

See [LICENSE](https://github.com/clerkinc/javascript/blob/main/LICENCE.md) for more information.

- [Localizations](#localizations)

All packages of the monorepo are inside [packages](../packages). For package specific details on installation, architecture and usage, you can refer to the package's README file.

- [`@clerk/backend`](../packages/backend): Functionalities regarded as "core" for Clerk to operate with. _Authentication resolution, API Resources etc._

- [`@clerk/clerk-js`](../packages/clerk-js): Core JavaScript implementation used by Clerk in the browser.

- [`@clerk/clerk-react`](../packages/react) Clerk package for React applications.

- [`@clerk/types`](../packages/types): Main TypeScript typings for Clerk libraries.

- Browse [packages](../packages) to see more

Additionally there are packages which act as shared utilities or building blocks.

If you want to add or edit localizations (e.g. how a button text is translated to your language), you can check out the [`localizations` README](../packages/localizations/README.md).

Clerk offers the ability to override the strings for all of the elements in each of the Clerk Components. This allows you to provide localization for your users or change the wording to suit your brand.

`@clerk/localizations` contains localized strings for applications using Clerk. If you found a typo, inaccuracies, or want to contribute a new language, please submit a PR and follow the [contributing guide](#contributing).

`@clerk/localizations` contains predefined localizations you can use:

import React from 'react';

import { ClerkProvider } from '@clerk/clerk-react';

function App() {

return (

<ClerkProvider localization={frFR}>

<div>Hello from clerk</div>

</ClerkProvider>

);

}

export default App;

You can also provide your own localization:

import React from 'react';

import { ClerkProvider } from '@clerk/clerk-react';

const localization = {

socialButtonsBlockButton: 'Sign In with {{provider|titleize}}',

};

function App() {

<ClerkProvider localization={localization}>

<div>Hello from clerk</div>

export default App;

1. Open the [`types/src/localization.ts`](https://github.com/clerkinc/javascript/blob/main/packages/types/src/localization.ts) file to add a new key to the `_LocalizationResource` type.

Naming things is hard, so try these things first: Has the component that should contain the new key already other localizations? If yes, see how they are named and if you could follow that pattern. For example, the `<SignIn />` component has keys with `signIn.start.title`, then I'd make sense to follow the `signIn.` pattern. If you're not sure, take your best guess and the maintainers will comment on the PR!

An exception to that are any errors that might be returned from the Frontend API. They need to go into the `unstable__errors` object inside each localization.

1. Run `npm build` to compile `types` with your new key

1. Open the [`localizations/src/en-US.ts`](https://github.com/clerkinc/javascript/blob/main/packages/localizations/src/en-US.ts) file and add your new key to the object. `en-US` is the default language. If you feel comfortable adding your message in another language than English, feel free to also edit other files.

1. Use the new localization key inside the component. There are two ways:

- The string is inside a component like `<Text>`:

```diff

- <Text>Role</Text>

+ <Text localizationKey={localizationKeys('formFieldLabel__role')} />

```

- The string is used in a function call:

```diff

+ const { t } = useLocalizations();

- card.setError('Some Error')

+ card.setError(t(localizationKeys('some_error')))

```

You'll need to import `localizationKeys` and `useLocalizations` when using them.

1. Open the [`localizations/src/en-US.ts`](https://github.com/clerkinc/javascript/blob/main/packages/localizations/src/en-US.ts) file and search for the text you want to update.

1. Update the text inside `en-US`. If possible, also update other languages.

1. Create a new file that follows the [IETF language tag](https://en.wikipedia.org/wiki/IETF_language_tag) format

1. Copy the contents of the `en-US.ts` file and translate all keys where necessary. Empty strings can stay empty. You don't need to translate things word by word, adjust where necessary as long as the same meaning is conveyed.