https://github.com/royanger/clerk-custom-user-menu
https://github.com/royanger/clerk-custom-user-menu
Last synced: over 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/royanger/clerk-custom-user-menu
- Owner: royanger
- Created: 2023-12-10T23:09:46.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-01-29T23:24:19.000Z (over 2 years ago)
- Last Synced: 2024-04-20T13:01:07.762Z (about 2 years ago)
- Size: 387 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Custom User Button with Clerk
## Introduction
Clerk is a developer-first authentication and user management solution. It provides pre-built React components and hooks for sign-in, sign-up, user profile, and organization management. Clerk is designed to be easy to use and customize, and can be dropped into any React or Next.js application.
This sample repo has branches that match each of the posts. Please see [Running the sample application](#running-the-sample-application) for more information.
## This repository is not actively maintained!
This repo and the example application may get updated for bug fixes, but it is likely to remain unmaintained. The following versions of key packages were used when developing the blog posts and the repo:
| Version | Package |
| ------- | ----------------------------- |
| 4.29.5 | @clerk/nextjs |
| 2.0.6 | @radix-ui/react-dropdown-menu |
| 0.7.0 | class-variance-authority |
| 2.1.1 | @heroicons/react |
## Deploy
Easily deploy the example application 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%2Froyanger%2Fclerk-custom-user-menu&env=NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY,CLERK_SECRET_KEY&envDescription=Clerk%20API%20keys&envLink=https%3A%2F%2Fclerk.com%2Fdocs%2Fquickstart%2Fnextjs&redirect-url=https%3A%2F%2Fclerk.com%2Fdocs%2Fquickstart%2Fnextjs)
## Running the sample application
This application has branches that match the parts of the blog post. You will want to checkout the branch that matches the post you are currently reading. If you are new to working with remote branches, the following will give you access to all branches:
```bash
git clone git@github.com:royanger/clerk-custom-user-menu.git
cd clerk-custom-user-menu
git fetch --all
```
You can now use the following to checkout the branch related to the post you are following:
```bash
// Part 1
git checkout custom-user-button-part-1
// Part 2
git checkout custom-user-button-part-2
```
To run the example locally, you need to:
1. Sign up for a Clerk account at [https://clerk.com](https://dashboard.clerk.com).
2. Go to the [Clerk dashboard](https://dashboard.clerk.com) and create an application.
3. Set the required Clerk environment variables as shown in [the example `env` file](./.env.local.example).
4. `pnpm install` the required dependencies.
5. `pnpm dev` to launch the development server.
## Learn more
To learn more about Clerk and Next.js, check out the following resources:
- [Quickstart: Get started with Next.js and Clerk](https://clerk.com/docs/quickstarts/nextjs)
- [Clerk Documentation](https://clerk.com/docs)
- [Next.js Documentation](https://nextjs.org/docs)
## Found an issue?
If you have found an issue with the examples, please create an [issue](https://github.com/royanger/clerk-custom-user-menu/issues).
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/royanger/clerk-custom-user-menu/pulls) with the solution. :rocket:
## Want to leave feedback?
Feel free to create an [issue](https://github.com/royanger/clerk-custom-user-menu/issues) with the **feedback** label. I will take a look at it and get back to you as soon as I can!
## Connect with us
You can discuss ideas, ask questions, and meet others from the community in our [Discord](https://discord.com/invite/b5rXHjAg7A).
If you prefer, you can also find support through our [Twitter](https://twitter.com/ClerkDev), or you can [email](mailto:support@clerk.dev) us!