-
Notifications
You must be signed in to change notification settings - Fork 12
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
a6ca1c3
commit a09856d
Showing
1 changed file
with
78 additions
and
23 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,42 +1,97 @@ | ||
| <p align="center"> | ||
| <a href="https://www.clerk.dev/?utm_source=github&utm_medium=starter_repos&utm_campaign=js_starter" target="_blank" align="center"> | ||
| <a href="https://clerk.com?utm_source=github&utm_medium=clerk_docs" target="_blank" rel="noopener noreferrer"> | ||
| <picture> | ||
| <source media="(prefers-color-scheme: dark)" srcset="./docs/clerk-logo-dark.png"> | ||
| <img src="./docs/clerk-logo-light.png" height="64"> | ||
| <source media="(prefers-color-scheme: dark)" srcset="./public/light-logo.png"> | ||
| <img alt="Clerk Logo for light background" src="./public/dark-logo.png" height="64"> | ||
| </picture> | ||
| </a> | ||
| <br /> | ||
| </p> | ||
| <div align="center"> | ||
| <h1> | ||
| Clerk JavaScript Quickstart | ||
| </h1> | ||
| <a href="https://www.npmjs.com/package/@clerk/clerk-js"> | ||
| <img alt="Downloads" src="https://img.shields.io/npm/dm/@clerk/clerk-js" /> | ||
| </a> | ||
| <a href="https://discord.com/invite/b5rXHjAg7A"> | ||
| <img alt="Discord" src="https://img.shields.io/discord/856971667393609759?color=7389D8&label&logo=discord&logoColor=ffffff" /> | ||
| </a> | ||
| <a href="https://twitter.com/clerkdev"> | ||
| <img alt="Twitter" src="https://img.shields.io/twitter/url.svg?label=%40clerkdev&style=social&url=https%3A%2F%2Ftwitter.com%2Fclerkdev" /> | ||
| </a> | ||
| <br /> | ||
| <br /> | ||
| <img alt="Clerk Hero Image" src="./public/hero.png"> | ||
| </div> | ||
|
|
||
| ## Introduction | ||
|
|
||
| Clerk is a developer-first authentication and user management solution. ClerkJS is our foundational JavaScript library for building user management and authentication. It enables you to register, sign in, verify, and manage users for your application using highly customizable flows. | ||
|
|
||
| After following the [ClerkJS quickstart](https://clerk.com/docs/quickstarts/javascript), you will have learned how to: | ||
|
|
||
| - Add the ClerkJS SDK to your JavaScript application | ||
| - Use Clerk components to allow users to sign in or out | ||
|
|
||
| ### Branches of this repository | ||
|
|
||
| To add the [ClerkJS SDK](/docs/references/javascript/overview) to your JavaScript application, you have two options: | ||
|
|
||
| 1. Install the package using a package manager, like `npm`, `yarn`, or `pnpm`. | ||
| 2. Use the `<script>` tag to load the ClerkJS package from our CDN. | ||
|
|
||
| The branches of this repository represent the results of these implementation: | ||
| - `main`: The result of following the JavaScript quickstart if you chose `NPM module` as your preferred method. | ||
| - `with-script-tag`: The result of following the JavaScript quickstart if you chose `<script>` as your preferred method. | ||
|
|
||
| ## Deploy | ||
|
|
||
| Easily deploy the template to Vercel with the button below. You will need to set the required environment variables in the Vercel dashboard. | ||
|
|
||
| [](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fclerk%2Fclerk-javascript-quickstart&env=VITE_CLERK_PUBLISHABLE_KEY&envDescription=Clerk%20API%20key&envLink=https%3A%2F%2Fclerk.com%2Fdocs%2Fquickstart%2Fjavascript&redirect-url=https%3A%2F%2Fclerk.com%2Fdocs%2Fquickstart%2Fjavascript) | ||
|
|
||
| ## Running the template | ||
|
|
||
| ```bash | ||
| git clone https://github.com/clerk/clerk-javascript-quickstart | ||
| ``` | ||
|
|
||
| To run the example locally, you need to: | ||
| <!-- Need new UTM link? Replaced "react" with "javascript" for now--> | ||
| 1. Sign up for a Clerk account at [https://clerk.com](https://dashboard.clerk.com/sign-up?utm_source=DevRel&utm_medium=docs&utm_campaign=templates&utm_content=10-24-2023&utm_term=clerk-javascript-quickstart). | ||
| <!-- Need new UTM link? Replaced "react" with "javascript" for now--> | ||
| 2. Go to the [Clerk dashboard](https://dashboard.clerk.com?utm_source=DevRel&utm_medium=docs&utm_campaign=templates&utm_content=10-24-2023&utm_term=clerk-javascript-quickstart) and create an application. | ||
|
|
||
| 3. Set the required Clerk environment variables as shown in [the example `env` file](./.env.sample). | ||
|
|
||
| # Clerk JS Starter | ||
| 4. `npm install` the required dependencies. | ||
|
|
||
| This example shows how to use [Clerk](https://www.clerk.dev/?utm_source=github&utm_medium=starter_repos&utm_campaign=js_starter) with Vanilla JS. | ||
| 5. `npm run dev` to launch the development server. | ||
|
|
||
| [](https://discord.com/invite/b5rXHjAg7A) | ||
| [](https://docs.clerk.dev) | ||
| [](https://twitter.com/intent/follow?screen_name=ClerkDev) | ||
| ## Learn more | ||
|
|
||
| --- | ||
| To learn more about Clerk and JavaScript, check out the following resources: | ||
| <!-- Need UTM link--> | ||
| - [ClerkJS SDK Reference Documentation](https://clerk.com/docs/references/javascript/overview) | ||
| <!-- Need new UTM link? Replaced "react" with "javascript" for now--> | ||
| - [Clerk Documentation](https://clerk.com/docs?utm_source=DevRel&utm_medium=docs&utm_campaign=templates&utm_content=10-24-2023&utm_term=clerk-javascript-quickstart) | ||
|
|
||
| **Clerk is Hiring!** | ||
| - [Vite Documentation](https://vitejs.dev/guide/) | ||
|
|
||
| Would you like to work on Open Source software and help maintain this repository? [Apply today!](https://apply.workable.com/clerk-dev/) | ||
| ## Found an issue? | ||
|
|
||
| --- | ||
| If you have found an issue with the quickstart, please create an [issue](https://github.com/clerk/clerk-javascript-quickstart/issues). | ||
|
|
||
| # Clerk + JavaScript Starter | ||
| If it's a quick fix, such as a misspelled word or a broken link, feel free to skip creating an issue. | ||
| Go ahead and create a [pull request](https://github.com/clerk/clerk-javascript-quickstart/pulls) with the solution. :rocket: | ||
|
|
||
| This repository shows how to use [Clerk](https://clerk.dev?utm_source=github&utm_medium=starter_repos&utm_campaign=js_starter) with JavaScript. | ||
| ## Want to leave feedback? | ||
|
|
||
| ## Running the starter locally | ||
| Feel free to create an [issue](https://github.com/clerk/clerk-javascript-quickstart/issues) with the **feedback** label. Our team will take a look at it and get back to you as soon as we can! | ||
|
|
||
| 1. Sign up for a Clerk account at https://clerk.dev | ||
| 2. Fork and/or clone this repository | ||
| 3. Add your "Publishable Key" (found on [API Keys](https://dashboard.clerk.dev/last-active?path=/api-keys)) to the `publishableKey` variable at the top of `src/script.js` | ||
| 4. Run the app: | ||
| - If you're using VS Code, we recommend [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer). | ||
| - Otherwise, feel free to use any server or tool of your choice. | ||
| ## Connect with us | ||
|
|
||
| ## Need help? | ||
| You can discuss ideas, ask questions, and meet others from the community in our [Discord](https://discord.com/invite/b5rXHjAg7A). | ||
|
|
||
| If you need support or have anything you would like to ask, please reach out in our [Discord channel](https://discord.com/invite/b5rXHjAg7A). We'd love to chat! | ||
| If you prefer, you can also find support through our [Twitter](https://twitter.com/ClerkDev), or you can [email](mailto:[email protected]) us! |