Request URL:
https://clerk.com/_next/data/-dH7mF0oXSvlucFejX5dd/docs/components/user/user-button.json?slug=components&slug=user&slug=user-button

Status Code:
404

Response: {"notFound":true}

Page URL: https://clerk.com/docs/components/user/user-button

Summary

I would like to help migrate the following clerk doc page from Sanity CMS to MDX: Metadata

Acceptance criteria

• Ensure all the content and links are the same and functional
• Use proper MDX components, themes, and headers for content, and headings

Notes

Discussed with @alexisintech working on the above page

Dear Clerk,

I'm currently trying to alter the appearance of the UserButton, there is a prop called appearance available, but I can not see in the docs what this appearance has for options to supply.

Do I have to check the source code to figure out what I can pass to it?

I'm just trying to make the userbutton avatar icon a bit bigger.

Please help.

Yours truly,
Hylke

I have been building a custom roles/permissions solution using user metadata to store the users role against their org. (Something I was recommended to do by the Clerk sales team).

However it appears that a users public metadata is only available if using the users API to getUserList(). If I use the users API to getOrganizationMembershipList() or the organizations API to getOrganizationMembershipList(), the users public metadata is always an empty object, {}.

Ideally this issue is fixed in the core API, but until then, the docs should correctly reflect this limitation.

Hey! Last month I tweeted out a missing part about converting a JWK to a PEM. I have a separate PR coming to fix that, but it got me thinking about other ways I could contribute.

I'd like to offer up the following AWS guides:

1. How to create a user in DynamoDB after a user signs up with Clerk
2. How to authorize your Clerk users to access your AWS AppSync API
3. How to authorize your Clerk users to access your API Gateway
4. How to use RBAC to allow your Clerk users to access their Amazon S3 bucket

I feel those 4 guides would allow customers to confidently use Clerk as an alternative to Amazon Cognito and make use of various social providers that Cognito doesn't support out of the box.

Thoughts? Happy to elaborate on any of the above topics or discuss alternatives as well.

Hello,

I'm currently in the process of developing a website and integrating Clerk for authentication. I've encountered a requirement where my middleware needs to check the authentication provider used by the user after sign-in. My goal is to prevent users from accessing the dashboard until they've connected their TikTok account.

I'm seeking ideas and guidance on how to implement this functionality. Any suggestions or insights would be greatly appreciated!

Current Approach and Challenges

I have tried achieving this without middleware by adding code in my layout.tsx file:

and this is my connections page:

However, sometimes, when I simply click back or type the route, I can still access the dashboard. I believe this approach may not be the most secure or reliable way to achieve what I need.

I also tried to access the user object from the middleware.ts using the callback function afterAuth :

But the only information the auth object returns is:

I'm looking for a proper and secure way to implement the authentication provider check in the middleware. If you have any ideas or recommendations, please share them. Thanks in advance for your help!

While exploring the documentation for Implementing basic Role Based Access Control (RBAC) with metadata, I encountered an issue that needs attention:

It is worth knowing that I am using Clerk Core 2.0..

The issue arises from the fact that await clerkClient.users.getUserList({ query }) does not directly return an array as expected.

Proposed Solution

To address this issue, we can simply access the data field returned by clerkClient.users.getUserList({ query }). By doing so, we ensure that we retrieve the array of users correctly.

Here's how to implement the correction:
const users = query ? (await clerkClient.users.getUserList({ query })).data : [];

By making this adjustment, we ensure that the code accurately captures the array of users, resolving the issue encountered.

I would appreciate any feedback on this proposed solution and would be glad to make further adjustments as needed.

there is no code example in the createUser() doc.

I tried to do it with this... but I got error!

try {
      const res = await clerkClient.users.createUser({
        firstName,
        lastName,
        emailAddress,
        password,
      });

      console.log(res);

      if (!res) {
        throw new Error("User creation failed");
      }
    } catch (error) {
      console.error(error);
}

Can I get a proper code example for createUser()

An example on how to update the users profile here would be good. It describes that you can update in the description but displays no method on doing so.

It would be nice to display a piece on how to do so, example taken from existing docs:

import { useUser } from '@clerk/nextjs';
  
  const updateMetadata = async () => {
    const { user } = useUser();
    const data = 'Data to store unsafely';

    try {
      const response = await user.update({
        unsafeMetadata: { data }
      });
      if (response) {
        console.log('res', response)
      }
    } catch (err) {
      console.error('error', err)
    }
  };

I've being trying to toggle theme but doesn't work.

I've tried

<ClerkProvider appearance={{ baseTheme: theme === "dark" ? dark : undefined  }}>

but since theme is using useContext inside useTheme it throws error as cannot be used in server components whereas ClerkProvider needs to be in server component only

I stored the publishable key at a .env file, and used the to wrap my components (just like the demo on the website), this error occurred

error node_modules/@clerk/shared/dist/esm/errors/thrower.js (46:0) @ Object.throwMissingPublishableKeyError
- error Error: @clerk/clerk-react: Missing publishableKey. You can get your key at https://dashboard.clerk.com/last-active?path=api-keys.

Note: I used the "ClerkProvider publishableKey= xxxx_the_actual_key_xxxx", and it works. but using

const publishableKey = process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY 
 <ClerkProvider publishableKey={publishableKey}>

this way, it doesn't work.

https://github.com/clerkinc/clerk-docs/blob/4f22977468ad40c2c6d54087d654c94db2f6c4a8/src/pages/quickstarts/full-stack/remix.mdx#L20C1-L20C3

It seems the indentation / formatting within the component is including the whitespace which is awkward for copy pasting code snippets.

Example (Ignore ending triple backticks rendering)
Current

  ```bash filename="your-project" copy
  npm install @clerk/remix
  `` `

Remove leading spaces

```bash filename="your-project" copy
npm install @clerk/remix
`` `

Hey Everyone, I am using the "createOrganization" method to create a new organization as specified here but getting a typescript error.

I am getting the following error.

Is it because of this? How to solve this error?

By following the two next.js guides in the new Docs (Next.js Stable and Next.js App Router (beta)), a first-time user will notice that our components don't render as advertised:

This is an expected behavior as our components inherit styles from the surrounding elements, making it easier for the developers to adapt them with little to no style overrides and since next.js stopped loading the Inter font globally in their latest versions, the text appears with the default system fonts.

However, because this is the first time these users might see our components in action, they might be confused for a second and believe that either the installation was not complete or, even worse, that we are doing something wrong.
It might be worth calling out our components behavior in the quickstart guide in order to reassure them.

I can't seem to access it on the user object only primaryEmailAddressId

import { OrganizationSwitcher } from "@clerk/nextjs";

const Topbar = () => {

return (

    <OrganizationSwitcher
      appearance={{
        elements: {
          organizationSwitcherTrigger: "py-2 px-4"
        }
      }}
    />

);
};

export default Topbar;
so this is the code I am using but it is actually not showing anything

https://clerk.com/docs/components/unstyled/sign-out-button#sign-out-options
According to this, there must be a redirectUrl

But in reality, there is no option. It gives an error

Kindly fix the issue

Summary

I would like to help in migrating two following clerk doc pages from Sanity CMS to MDX:

• Deleting users page under Users
• Web3 authentication under Users/Guides

Acceptance criteria

• Ensure all the content and links are the same and functional
• Use proper MDX components and headers for content and headings

Is there a way to customize the size of the use button component. I dont see any options. Correct me if i am wrong.
I am using nextjs with the app router
Thank u

https://github.com/clerk/javascript/releases

@clerk/[email protected]

wrong address: For more info, refer to the upgrade guide from v4 to v5 in Clerk docs.

@clerk/[email protected]

wrong address: Deprecate authMiddleware in favor of clerkMiddleware. For more information, see https://clerk.com/docs/upgrade-guides/v5-introduction

Link to the webhook docs that is published on this page is broken: https://dashboard.clerk.com/apps/app_2UOOoD9SdBm046btfsIJztYGqXi/instances/ins_2UOOoBnO0WCStraHVHC5Wr6OVsb/webhooks

page at the above link works, but the link published on that page is broken

I installed expo-secure-store following the command on the official documentation

npx expo install expo-secure-store

And then imported it, created token cache, and added it to ClerckProvider

import * as SecureStore from 'expo-secure-store';

const tokenCache = {
  getToken(key: string) {
    try {
      return SecureStore.getItemAsync(key);
    } catch (err) {
      return null;
    }
  },
  saveToken(key: string, value: string) {
    try {
      return SecureStore.setItemAsync(key, value);
    } catch (err) {
      return null;
    }
  },
};

          <ClerkProvider publishableKey={publishableKey} tokenCache={tokenCache}>
            <Routes />
          </ClerkProvider>

It turns out that strictly following the docs gave me the following error:

I don't think it's a good development experience to find such a simple error during setup

The solution

const tokenCache = {
  async getToken(key: string) {
    try {
      return SecureStore.getItemAsync(key);
    } catch (err) {
      return null;
    }
  },
  async saveToken(key: string, value: string) {
    try {
      return SecureStore.setItemAsync(key, value);
    } catch (err) {
      return;
    }
  },
};

Ps.: This library is amazing, thx for it!

For people using the NextJS /src directory convention, they have to add the middelware.js/ts file inside the /src directory, not inside the root of the project.

Adding some mention of this in the docs specifically in the configure-middleware

Would save onboarding users from a sharp edge (if they are using the src directory)

Summary

I would like to contribute in migrating following clerk doc page from Sanity CMS to MDX:

Handling requests with Node.js and Express

Acceptance criteria

• Ensure all the content and links are the same and functional
• Use proper MDX components

The Clerk Quickstarts are in need of a bit of an update to become our flagship tutorial content type.

Starting with the Next.js quickstart, let's make them easier and clearer to navigate.

Resolving involve:

• Updating the Next.js quickstart
• Updating the two corresponding sample apps for pages and app router
• Adding a styleguide
• And a new template for tutorials

The styleguide and template can be applied to the other quickstart as a follow up.

There are a few minor repetitions and typos in the Remix quickstart

The import of ClerkApp is repeated in multiple sections

Introduction of ClerkApp

https://github.com/clerkinc/clerk-docs/blob/df776415a4bd4e8ca9da2a0567584b6e7f18f94f/src/pages/quickstarts/full-stack/remix.mdx#L106-L120

Addition of ClerkCatchBoundary

https://github.com/clerkinc/clerk-docs/blob/df776415a4bd4e8ca9da2a0567584b6e7f18f94f/src/pages/quickstarts/full-stack/remix.mdx#L160-L173

I think all the Clerk imports should be consolidated and shown on lines near each other

Typo for error boundary

This quick start shows the V2_ErrorBoundary and has a typo, although I don't see this in the source code 🤔
The source also doesn't seem to be showing V2_ErrorBoundary so many I am looking in the wrong location

Note: "add n Error Boundary" should be "add an Error Boundary"

https://github.com/clerkinc/clerk-docs/edit/main/src/pages/quickstarts/full-stack/remix.mdx

Summary

I would like to contribute in migrating following clerk doc page from Sanity CMS to MDX:

Email & SMS templates under Configuration

Acceptance criteria

• Ensure all the content and links are the same and functional
• Use proper MDX components

https://github.com/clerk/clerk-docs/edit/main/docs/organizations/verified-domains.mdx

After a user has turned on the Verified Domains setting in the Clerk dashboard, it's unclear whether they're able to add a verified domain for an organization within the dashboard, or whether they need to use the API.

The help center content reads like it's available as an option within the dashboard, but it's not obvious how to actually do this.

To improve the documentation:

1. It should be clear whether a Clerk user can add a verified domain for an organization within the Clerk dashboard, or whether it must be done through an API call.
2. It should provide step-by-step instructions on how to actually create a domain for an organization, and how to verify it (e.g. how to trigger sending the email verification code mentioned in the documentation)

I'm using t3 stack and making request to trpc route that looks like /api/trpc/posts.getAll

I'm also trying to call getAuth() inside createTRPCContext like this:

export const createTRPCContext = (opts: CreateNextContextOptions) => {
  const { req } = opts;
  const { userId } = getAuth(req);

  return {
    prisma,
    userId,
  };
};

As I understand correctly, this change in docs rules out withClerkMiddleware, so getAuth() throws an error in createTRPCContext.

Not sure, what was the reason behind this change in docs, but thought it may be useful as feedback

https://beta-docs.clerk.com/quickstarts/nextjs/app-router#add-middleware
"Middleware should be placed at the root of your project."

The middleware file needs to be placed in the src folder, if in use. The rest of Clerk's documentation is pretty verbose, so making note of vercel dev might be a good idea for new users.

I have followed each step exactly from https://beta-docs.clerk.com/quickstarts/nextjs/app-router and am getting the following error:

Error: Invariant: Method expects to have requestAsyncStorage, none available

Packages
Next.js: 13.2.4
@clerk/nextjs: ^4.11.13

There should be a warning or a dialog that would tell the user that they can't send an empty feedback.

Device: MacOS
Browser: Chrome
Package: @clerk/clerk-react

When closing the UserProfile modal, I cannot scroll until I refresh the page. The bug isn't happening on mobile device. It happens when opening the modal through the <UserButton /> and openUserProfile()

Would be great if a repo link (plus supabase tables setup) was included with this blog post:

https://clerk.com/blog/magic-links

It's useful as a high level look-see but requires further details.

Summary

I would like to contribute in migrating following clerk doc page from Sanity CMS to MDX:

Handling requests with Node.js and Express
Handling requests with Gatsby
Handling requests with Go
Handling requests with Rack and Rails

Acceptance criteria

• Ensure all the content and links are the same and functional
• Use proper MDX components

Is there a way to change the direction of the text when showName is enabled?
currently it defaults to show the name on the left of the icon. can there be a way to flip them so I can have this component on the left side of the screen?

On this page, it forgets to mention the fact that you have to whitelist the custom redirect URL via the Clerk Dashboard as it mentions in the README.md of the clerkin/clerk-expo-start.

I kept running into the error below and was stumped for a while until I found that README.md

In the Usage with getToken section, the data variable is undefined.

when I sign in using their built in component in expo react native app account is created successfully but user is not redirect back to my app

Preliminary Checks

• I have reviewed the documentation: https://clerk.com/docs

• I have searched for existing issues: https://github.com/clerk/javascript/issues

• I have not already reached out to Clerk support via email or Discord (if you have, no need to open an issue here)

• This issue is not a question, general help request, or anything other than a bug report directly related to Clerk. Please ask questions in our Discord community: https://clerk.com/discord.

Reproduction

https://github.com/ignore-me

Publishable key

pk_ignore_me

Description

https://clerk.com/docs/references/javascript/user/user says a user.createdAt is a Date, but in node_modules/.pnpm/@[email protected][email protected]/node_modules/@clerk/backend/dist/types/api/resources/User.d.ts, it says User.createdAt is a number:

readonly createdAt: number;

I'm not sure which one is right.

Environment

n/a

Description

There's a spelling mistake in the Implement basic Role Based Access Control (RBAC) with metadata section, just before the final admin page. Email is misspelled and needs correction for documentation accuracy.
You can look for the spelling mistake over here.

Solution

Correct the spelling mistake in the mentioned paragraph by replacing the misspelled email with the correct spelling.

Screenshot:

Hello, Clerkians 👋

In the Quickstarts section, ¹ links to examples (guides and tutorials) lead to old page layouts.

See screen recording here (Chrome 122.0.6261.69): https://share.cleanshot.com/kzrXTyVd

Keep up your great work 😄

In the Upgrading to Core 2 Next.js SDK guide, clerkClient is not listed in the "Changes to top-level exports" section under the list of exports that have moved from @clerk/nextjs to @clerk/nextjs/server.
https://clerk.com/docs/upgrade-guides/core-2/nextjs#changes-to-top-level-exports

It is currently listed incorrectly in the "Deleting users" section of the Users docs under the Next.js tab as still,
import { clerkClient } from "@clerk/nextjs";
https://clerk.com/docs/users/deleting-users

However, it is listed correctly in the "Overview" section of the Backend SDK docs under the Next.js tab as,
import { clerkClient } from "@clerk/nextjs/server";
https://clerk.com/docs/references/backend/overview

I'm trying to add the userId of the current user to the tRPC context, the same it was done in this project

I get this error log, but the Clerk provider is being used already and when I remove the call to getAtuth, everything works just fine

My branch with the issue here
For context, I'm following the tutorial for this project

I am trying to add webhook to my project for the Clerk

app\api\webhooks\route.ts

import { Webhook } from "svix";
import { headers } from "next/headers";
import { WebhookEvent } from "@clerk/nextjs/server";
import { createUser, deleteUser, updateUser } from "@/lib/actions/user.action";
import { NextResponse } from "next/server";

export async function POST(req: Request) {
  // You can find this in the Clerk Dashboard -> Webhooks -> choose the webhook
  const WEBHOOK_SECRET = process.env.NEXT_CLERK_WEBHOOK_SECRET;

  if (!WEBHOOK_SECRET) {
    throw new Error(
      "Please add WEBHOOK_SECRET from Clerk Dashboard to .env or .env.local"
    );
  }

  // Get the headers
  const headerPayload = headers();
  const svix_id = headerPayload.get("svix-id");
  const svix_timestamp = headerPayload.get("svix-timestamp");
  const svix_signature = headerPayload.get("svix-signature");

  // If there are no headers, error out
  if (!svix_id || !svix_timestamp || !svix_signature) {
    return new Response("Error occured -- no svix headers", {
      status: 400,
    });
  }

  // Get the body
  const payload = await req.json();
  const body = JSON.stringify(payload);

  // Create a new Svix instance with your secret.
  const wh = new Webhook(WEBHOOK_SECRET);

  let evt: WebhookEvent;

  // Verify the payload with the headers
  try {
    evt = wh.verify(body, {
      "svix-id": svix_id,
      "svix-timestamp": svix_timestamp,
      "svix-signature": svix_signature,
    }) as WebhookEvent;
  } catch (err) {
    console.error("Error verifying webhook:", err);
    return new Response("Error occured", {
      status: 400,
    });
  }

  const eventType = evt.type; 

  console.log({ eventType });
  console.log("hi");

  //   Here we are getting all the user event data
  if (eventType === "user.created") {
    const { id, email_addresses, image_url, username, first_name, last_name } =
      evt.data; 

 

    // Create a new user in your database
    const mongoUser = await createUser({
      clerkId: id,
      fullName: `${first_name}${last_name ? `${last_name}` : ""}`,
      username: username!,
      email: email_addresses[0].email_address,
      profilePicture: image_url,
    });
    return NextResponse.json({ message: "OK", user: mongoUser });
  }
  if (eventType === "user.updated") {
    //agar user mai kuch update hota hai tab mujhe
    const { id, email_addresses, image_url, username, first_name, last_name } =
      evt.data;
    const mongoUser = await updateUser({
      clerkId: id,
      updateData: {
        fullName: `${first_name}${last_name ? `${last_name}` : ""}`,
        username: username!,
        email: email_addresses[0].email_address,
        profilePicture: image_url,
      },
      path: `/profile/${id}`,
    });
    return NextResponse.json({ message: "OK", user: mongoUser });
  }

  if (eventType === "user.deleted") {
    const { id } = evt.data;
    const deletedUser = await deleteUser({
      clerkId: id!,
    });
    return NextResponse.json({ message: "OK", user: deletedUser });
  }

  return new Response("", { status: 201 });
}

middleware.ts

 import { authMiddleware } from "@clerk/nextjs";
    
    export default authMiddleware({
      publicRoutes: [
        "/",
        "/api/webhooks(.*)",
        "question/:id",
        "/tags",
        "tags/:id",
        "/profile/:id",
        "/community",
        "/jobs",
      ],
      ignoredRoutes: ["/api/webhook", "/api/chatgpt"],
    });
    
    export const config = {
      matcher: ["/((?!.+\\.[\\w]+$|_next).*)", "/", "/(api|trpc)(.*)"],
    };

After this I added the endpoint url to the clerk webhook Image of Clerk Webhook Endpoint Url

But when I am checking my log of my deployed project I am not able to see any request related to the /api/webhook by Clerk Screenshot of Vercel Deployed project>logs

Please help me solving this issue!

I rechecked all my code and not able to figure out the problem

Hi all, I'm trying to use Clerk as my app's user management and facing issues when following the docs.

So when I got to step 3, I tried to run the app to make sure the wirings are correct. The first error I got was missing dependency, expo-auth-session. Then I installed it with it's required/peer dependency mentioned in Expo docs.

Then started the app again and I'm getting this:

I'm using "expo": "49.0.15", with Expo Router

Is Clerk not supporting this routing mechanism yet?

Thank you in advance.