Clerk Elements Beta Feedback Thread

[BRKalow]

On May 2nd, Clerk released the beta version of Clerk Elements, an unstyled collection of components to build completely custom authentication and user management UIs. If you have had a chance to try it out and have feedback, please share it here!

[grgdlm]

Will it stay free? 👀

[LekoArts]

Hi!

Similar to our already existing prebuilt components, React hooks, and generally speaking our SDKs Clerk Elements will be free to use.

[user-0a]

I like how the internal logic is clearly separate from the react-specific code. Would be awesome to support frameworks other than react in the future :)

[tsibelman]

Is there an example of how to setup email_link strategy ?

[LekoArts]

What type of example would be helpful? Do you mean a repository or docs? What are you missing?

[tsibelman]

A working github sample would be best. We tried to make it work by ourselfs but encountered werid bugs

[corentinmusard]

Same, I can't figure out how to make clerk send an email link instead of an email code

[marcogian2001]

The redirect to the homepage after signing in from the SignInPage does not work. However, the redirect works correctly on the SignUp page.

[ubersan]

same here

[LekoArts]

Hi!

Can you please share a minimal reproduction that shows this behavior? Then we can have a closer look - thanks!

[ubersan]

gonna take a look later today again, yesterday I quickly checked and I maybe have not set the envs correctly

[charleyslee]

I experienced an issue where every interaction was taking forever on a new signup page built with Elements. Turns out it was the CF Turnstile /cdn-cgi endpoints constantly returning HTTP 431s after hanging for 10+ seconds. I'm not too sure if this is an issue with Elements specifically though.

[dstaley]

Yeah, this is a bug in Turnstile that we've reported to Cloudflare. Unfortunately I don't think it's been resolved yet.

[jdhenry08]

Is there documentation somewhere about valid values for the FieldError code param (ideally per-field-name)?

[Adrastopoulos]

Do clerk elements handle user impersonation?

[dstaley]

They currently do not support User Impersonation.

[Vahor]

I'm using elements on my app and so far everything is working, however I have a few questions

• If my app only uses clerk elements, is it possible to remove the need of @clerk/[email protected]/dist/ui-common ?
• Remove Clerk branding is in the Pro plan, but by using clerk elements we no longer have that branding. What should we do in that case ? Not that I complain, but I don't want any issues.
• When using <Clerk.Connection> with a social method on a SignIn page (Signin.Root), that action will only log the user. On a SignUp page it will start the registration process.
  My question is can we configure it so that on a SignIn page, if the user does not exist it start the registration process ?

[dstaley]

If my app only uses clerk elements, is it possible to remove the need of @clerk/[email protected]/dist/ui-common ?

Not at the moment. Elements still relies on clerk-js, but we're exploring ways to reduce the amount of JavaScript downloaded. We'll take a look and see if we can specifically remove the ui-common imports.

Remove Clerk branding is in the Pro plan, but by using clerk elements we no longer have that branding. What should we do in that case ? Not that I complain, but I don't want any issues.

Consider it a happy accident! You're not going to get in any trouble for not having the Clerk branding on your Elements implementation.

When using <Clerk.Connection> with a social method on a SignIn page (Signin.Root), that action will only log the user. On a SignUp page it will start the registration process. My question is can we configure it so that on a SignIn page, if the user does not exist it start the registration process ?

We have most of the foundation for this to work as you've described, but it is not currently enabled in Elements.

[Vahor]

Hi 👋 Are there any news regarding the last point (using the login page as a login/register page) ?

[dstaley]

@Vahor We are still actively working on this! Nothing to share at the moment, but hopefully in a few weeks or so we should have a better idea of how this functionality will be built out within Elements.

[bart-sofomo]

Hi,
Any advice how to perform saml signin? I have a code like this:

                <SignIn.Root>
                  <SignIn.Step name="start">
                    <Clerk.GlobalError />

                    <Clerk.Field name="identifier">
                      <Clerk.Label>Email</Clerk.Label>
                      <Clerk.Input />
                      <Clerk.FieldError />
                    </Clerk.Field>

                    <SignIn.Action submit={true}>Sign in with Azure Active Directory</SignIn.Action>
                  </SignIn.Step>
                </SignIn.Root>

but then I hit the button I can see that proper call was invoked in network panel but nothing happens. If I add:

                  <SignIn.Step name="verifications">
                    <SignIn.Strategy name="saml">
                      <SignIn.Action submit>
                        Sign in with Azure Active Directory
                      </SignIn.Action>
                    </SignIn.Strategy>
                  </SignIn.Step>

it doesn't render after first button clicked. Is there something missing in @clerk/elements for saml login?

[dstaley]

SAML support was added to Elements in version 0.11.0, released on August 1. This should work now, but if not definitely file an issue and we'd be happy to take a look!

[pruett]

It has been really nice and intuitive to use/migrate so far. I have noticed one thing in particular, however:

In the verification step, e.g. <SignIn.Step name="verifications" /> there doesn't appear to be a clear way of getting the loading state of the verification process.

For example, after the <SignIn.Action> button is clicked in the verification step, a nested <Clerk.Loading> nor a top-level <Clerk.Loading> (isGlobalLoading) seems to accurately reflects when the verification is pending/loading.

These boolean loading value(s) go from true to false before the verification step finishes navigating to the signin redirect url. During this brief "flicker" the values of <SafeIdentifier /> and <Salutation /> are also nulled out, causing a brief FOUC-like experience if the signin page uses any of those components.

Is this a known issue, or the expected behavior?

[yasseralsaidi]

yes, i have the same problem, how to fix it?

[pruett]

Haven't been able to fix. For now, I've simply removed all references to SafeIdentifier and Salutation. Hoping there will be a way to get a handle on the loading states, but haven't figured out a way to achieve that either

[Royal-lobster]

testing out the code from https://clerk.com/docs/elements/examples/shadcn-ui#sign-up, but the continue is not working :/ it directly goes through the verifications step when signing up with email

[sidyr6002]

When I am trying to sign-in using google. I am being redirected to signup/continue asking for username. When entering the user input I am getting an error saying 'username is not a valid parameter for this request.'

Note: I don't know what the issue was. I turned off and re-enabled the username feild in 'Clerk Dashboard' and it worked

[rogueturnip]

Really enjoy using Elements, it's a great way to implement the UI for Clerk.

I am having one issue and I can't find any documentation on this. I have a redirect_url specified as I hit the the signin/signup pages I've created. I can see it in the params, I can console log it out in the code but on completion of signin or signup it goes to my fallback url. Is redirect_url implemented currently in Elements or is there some other way to use it?

Thanks!

[mundanelunacy]

Seeing the same issue. forceRedirectUrl, signUpForceRedirectUrl, and signInForceRedirectUrl appear to be ignored by Elements as well.

[femiadebayo]

Forgot password action navigation does not seem to work when password is default strategy in "start" step. The action only seems to navigate when it is included in the "verifications" step.

I get the below console error

[nsx07]

Same here, I couldn't find any documentation about resetting passwords in the email-password flow, all the examples of clerk elements didn't implement anything like that, which is very strange, what's a login form without a password reset option? Anyway, I'm trying to find a way to overcome this. If anyone knows how to solve this problem, I'd be very grateful

[weisisheng]

Hey Gang- I usually use shadcn, but just stumbled across a good example of elements + stripe for hybrid signup/subscriptions use. When I try it, I get the following error "Argument of type 'string' is not assignable to parameter of type 'AfterpayClearpayMessageElementComponent'.". This is in line #40 of the SignUpForm.tsx , " const cardEl = elements?.getElement("card");". Grubbing around, I can't find a repo or any other posts about it. Appreciate any tips.

https://clerk.com/blog/building-a-hybrid-sign-up-and-subscribe-form-with-stripe

[Dmi3D]

Does Clerk Elements support setting metadata upon sign-up?

[thomzi12]

Did anyone else run into this error?

./node_modules/@clerk/elements/dist/chunk-7WFXAEQQ.mjs:90:1
Module not found: Can't resolve '@clerk/shared/router'

Stackoverflow: https://stackoverflow.com/questions/78982447/cant-resolve-clerk-shared-router-in-clerk-elements

[dstaley]

@thomzi12 We've fixed the issue in @clerk/[email protected]. Please upgrade and let us know if you have any issues!

[alxmny]

Are there any plans to allow the setting of user metadata using elements? I've hacked around it for now but it's a not pretty solution.

[dnrico1]

How did you do it? I am facing the same need..

[Developer-Utkarsh]

Clerk Elements and ShadCN UI Integration Causing Redirect Loops and API Errors

Hello, I'm facing a critical issue while using Clerk Elements alongside ShadCN UI in my project. Specifically, there are two major problems related to sign-in and sign-up functionality:

Redirect Loop on Form Submission:

When I enter my email in the sign-in input field and press "Enter," instead of proceeding with sign-in, it redirects me to the sign-up page.
Conversely, when I press "Enter" on any field on the sign-up form, it redirects me back to the sign-in page.
This behavior keeps looping, preventing me from completing either process.

API Error When Clicking Buttons:

When I try to sign in or sign up using the respective buttons (without pressing Enter), the forms submit, but the Clerk API returns a 422 status code (Unprocessable Entity).
The error message indicates "Unprocessable Content", but I’m not sure what part of the request is causing this.

Relevant Details:

UI Library: ShadCN UI
Authentication: Clerk Elements
Issue Occurs: On pressing Enter in input fields (redirect loops) and when using buttons (API error 422).

I’ve double-checked my integration with Clerk and ensured that all fields are correctly filled. I would greatly appreciate any guidance on how to resolve the redirect loop and fix the 422 API error.

Repo Link

Thank you!

[svitalis123]

Hello i am encountering this error
Attempted import error: 'iconImageUrl' is not exported from '@clerk/shared/constants' (imported as 'iconImageUrl').
while implementing the sign-in and i can't find iconImageUrl nor where this is imported @clerk/shared/constants'

i am using Next version 14, i am using app router.

[sidyr6002]

I am trying to implement protected routes and my middleware looks like:

import { clerkMiddleware, createRouteMatcher } from "@clerk/nextjs/server";

const isPublicRoute = createRouteMatcher([
    "/sing-in(.*)",
    "/sing-up(.*)",
    "/home(.*)",
]);

export default clerkMiddleware(async (auth, req) => {
    if (!isPublicRoute(req)) {
        await auth.protect();
    }
});

export const config = {
    matcher: [
        "/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)",
        "/(api|trpc)(.*)",
    ],
};

the redirect to sign-in while accesing protected routes without user login, is not working. It is redirecting to sign-in page too much/ may be falling in a infiinite loop

[bskor66]

ClerkElementsRuntimeError: You have used <Connection name="linkedin"> which isn't enabled for your project. Enable LinkedIn in your Clerk dashboard: https://dashboard.clerk.com/last-active?path=/user-authentication/social-connections

Originating from

<Clerk.Connection name="linkedin">
    Sign in with LinkedIn
</Clerk.Connection>

LinkedIn is enabled and works fine with the <SignIn /> Component
Google is working fine with name="google"

"next": "15.0.2", "react": "19.0.0-rc-02c0e824-20241028", "react-dom": "19.0.0-rc-02c0e824-20241028", "@clerk/elements": "^0.18.4", "@clerk/nextjs": "^6.0.2" if that is relevant

[bskor66]

Stack as well

ClerkElementsRuntimeError: You have used <Connection name="linkedin"> which isn't enabled for your project. Enable LinkedIn in your Clerk dashboard: https://dashboard.clerk.com/last-active?path=/user-authentication/social-connections
    at useThirdPartyProvider (webpack-internal:///(app-pages-browser)/./node_modules/@clerk/elements/dist/chunk-4FHATJFX.mjs:1564:11)
    at Connection (webpack-internal:///(app-pages-browser)/./node_modules/@clerk/elements/dist/chunk-4FHATJFX.mjs:1598:20)
    at react-stack-bottom-frame (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:22341:20)
    at renderWithHooks (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:5732:22)
    at updateFunctionComponent (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:7993:19)
    at beginWork (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:9658:18)
    at runWithFiberInDEV (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:544:16)
    at performUnitOfWork (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:14988:22)
    at workLoopSync (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:14818:41)
    at renderRootSync (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:14796:11)
    at performWorkOnRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:14331:46)
    at performSyncWorkOnRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:15859:7)
    at flushSyncWorkAcrossRoots_impl (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:15721:21)
    at processRootScheduleInMicrotask (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:15755:7)
    at eval (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:15875:13)

[dashseller]

Dear Clerk team, I notice I can no longer do this with SafeIdentify

<Input placeholder={SignIn.SafeIdentifier()} disabled className="border-none bg-transparent" />

What is the fix for this?

[umeranjum17]

Hi Clerk team,

Is there a way to enforce MFA for all my new users, my auth scheme mandates everyone to have MFA enabled by default.

[iain-reid]

Hi. I'm attempting to add Elements via pnpm add @clerk/elements - however I get the following build error:

I can see that I don't have /utils - but what is the correct/best way of resolving this? Any help would be much appreciated :-)

[Floriferous]

Hey, I'm getting a strange error saying Error: useClerk can only be used within the <ClerkProvider /> component. Learn more: https://clerk.com/docs/components/clerk-provider. I triple checked to make sure, but it's properly nested in ClerkProvider, as you can see in this screenshot from the error (ClerkProvider is about halfway in the stack).

Just using the regular SignIn component from clerk-react works without any issues, in the exact same place.

[ernesco27]

I have the same issue! Is there a fix?

[najamrankbee]

I am also having the same issue.

[Clad012]

+1

[himaSH97]

I updated the clerk/elemnts and it worked.
Fyi- @ernesco27 , @najamrankbee , @Clad012

[tragicrich]

Is there a timeline of any sort for a stable production-ready release?

[jescalan]

Hey all,

We made this thread as a place to collect feedback after the initial release of elements, and were able to keep up for a while, but it has now been 6+ months since the initial release and we have not done as good of a job monitoring this thread and keeping up. I am so sorry, on Clerk's behalf, for anyone who dropped a question or request for help in here that went unanswered 😭

Going forward, if you have feedback or issues with Elements, please send them directly through our support, and we will make sure you get an answer in a timely manner. And also worth noting, we cut releases fairly frequently, so give upgrading your version a try to see if that fixes your issue before writing in!