Page 6

Jun 25

Google One Tap

Category: Components
Published: Jun 25

Introducing support for Google One Tap for seamless, one-click user sign-ins and sign-ups!

By leveraging Google One Tap, users can effortlessly access your services without needing to remember passwords or undergo lengthy registration steps. This strategy aims to increase user engagement and conversion rates by simplifying the sign-in process, making it easier for users to get started with your application.

Our new component

To enable this feature, all you have to do is drop the new <GoogleOneTap /> component into your React application. For applications that don't have Google OAuth already set up with custom credentials, please read our guide in order to configure it.

/app/layout.tsx

import React from 'react'
import { ClerkProvider, GoogleOneTap } from '@clerk/nextjs'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <title>Google One Tap with Clerk and Next.js</title>
      </head>
      <ClerkProvider>
        <GoogleOneTap />
        <body>{children}</body>
      </ClerkProvider>
    </html>
  )
}

For those who are interested in custom flows or would like to use the component but whose application does not run in React, they can visit our documentation page to learn more about Google One Tap and its usage with clerk-js.

May 2

Clerk Elements (Beta)

Category: Components
Published: May 2

Introducing Clerk Elements, a new set of unstyled UI primitives that make it easy to build completely custom user interfaces on top of Clerk's API.

Our pre-built UI components are a phenomenal way to integrate Clerk's authentication and user management features into your applications, but we know that many of you are looking for even more customization. That has usually meant dropping down to our hooks to create custom flows. Clerk's hooks offer a ton of flexibility and control for creating flows exactly as you want, but we think we can make it easier for you to focus on building your UI while letting us handle the underlying logic.

This is why we're excited to introduce Clerk Elements (Beta). Clerk Elements is a collection of composable components for creating completely custom authentication and user management UIs on top of Clerk's APIs and business logic. We think the component is a great abstraction, and so we're taking it a step further and exposing an unstyled set of components that you can use to build your authentication UIs to completely match your brand and existing design system.

Clerk Elements is launching in beta today, with support for building fully custom sign-up and sign-in flows inside Next.js. Along with the release, we're also sharing documentation and examples to get you started with Clerk Elements.

Build with Clerk Elements

They say a picture is worth a thousand words (and a component is worth 1,000 APIs), so let's dive right in. Below are examples of unstyled sign-up and sign-in flows built with Clerk Elements. These snippets support authenticating with Google auth, or email and email code.

/app/sign-up/[[...sign-up]]/page.tsx

'use client'

import * as Clerk from '@clerk/elements/common'
import * as SignUp from '@clerk/elements/sign-up'

export default function SignUpPage() {
  return (
    <SignUp.Root>
      <SignUp.Step name="start">
        <h1>Create your account</h1>
        <p>Welcome! Fill in the fields below to get started.</p>
        <Clerk.GlobalError />

        <Clerk.Connection name="google">
          <Clerk.Icon name="google" /> Sign up with Google
        </Clerk.Connection>

        <div>or</div>

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

        <SignUp.Action submit>Continue</SignUp.Action>
      </SignUp.Step>
      <SignUp.Step name="continue">
        <h1>We need a few more details.</h1>
        <Clerk.GlobalError />

        <Clerk.Field name="firstName">
          <Clerk.Label>First name</Clerk.Label>
          <Clerk.Input />
          <Clerk.FieldError />
        </Clerk.Field>

        <Clerk.Field name="lastName">
          <Clerk.Label>Last name</Clerk.Label>
          <Clerk.Input />
          <Clerk.FieldError />
        </Clerk.Field>

        <SignUp.Action submit>Continue</SignUp.Action>
      </SignUp.Step>
      <SignUp.Step name="verifications">
        <Clerk.GlobalError />

        <SignUp.Strategy name="email_code">
          <h1>Check your email</h1>
          <p>We've sent a code to your email.</p>
          <Clerk.Field name="code">
            <Clerk.Label>Email code</Clerk.Label>
            <Clerk.Input />
            <Clerk.FieldError />
          </Clerk.Field>
          <SignUp.Action submit>Continue</SignUp.Action>
        </SignUp.Strategy>
      </SignUp.Step>
    </SignUp.Root>
  )
}

/app/sign-in/[[...sign-in]]/page.tsx

'use client'

import * as Clerk from '@clerk/elements/common'
import * as SignIn from '@clerk/elements/sign-in'

export default function SignInPage() {
  return (
    <SignIn.Root>
      <SignIn.Step name="start">
        <h1>Sign in to Clover</h1>
        <p>Welcome back! Please sign in to continue.</p>

        <Clerk.GlobalError />

        <Clerk.Connection name="google">
          <Clerk.Icon name="google" /> Sign in with Google
        </Clerk.Connection>

        <div>or</div>

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

        <SignIn.Action submit>Continue</SignIn.Action>
      </SignIn.Step>
      <SignIn.Step name="verifications">
        <Clerk.GlobalError />

        <SignIn.Strategy name="email_code">
          <h1>Check your email</h1>
          <p>
            We've sent a code to <SignIn.SafeIdentifier />.
          </p>
          <Clerk.Field name="code">
            <Clerk.Label>Email code</Clerk.Label>
            <Clerk.Input />
            <Clerk.FieldError />
          </Clerk.Field>
          <SignIn.Action submit>Continue</SignIn.Action>
        </SignIn.Strategy>
      </SignIn.Step>
    </SignIn.Root>
  )
}

Customize Elements

As you can see from the above snippets, Clerk Elements gives you complete control over the markup rendered in your authentication flows, and everything is unstyled. We want to make it easy for you to integrate with your existing styling approach. To that end, any markup that is rendered can accept a className prop. Bring on those Tailwind classes!

<SignIn.Action submit className="bg-purple-500 px-4 py-2 text-white shadow-sm">
  Continue
</SignIn.Action>

Clerk Elements also support the asChild prop, popularized by component libraries like Radix. Bring your existing component library and it'll take care of the rest.

<SignUp.Action submit asChild>
  <CloverButton>Continue</CloverButton>
</SignUp.Action>

For more information on the available components and how to get started building fully custom flows with Clerk Elements, check out the Clerk Elements documentation.

Building towards GA

While we're not marking Elements as stable quite yet, we're currently dogfooding it internally by building our existing pre-built components with Elements. As we do this, we expect to continue to make refinements to the component APIs to make sure we support even the most complex use cases.

Once our pre-built components are built on Elements and it supports all major React frameworks (not only Next.js), we'll be ready to mark Elements as stable and fully ready for production.

Your feedback is critical during this beta period to making sure Clerk Elements is the best it can be. If you have questions or want to talk to other users who are testing out the Clerk Elements beta, join the Clerk Community on Discord.

We're already having fun internally dreaming up new authentication UIs made possible with Clerk Elements, and we can't wait to see what you build!

Apr 24

Testing Tokens

Category: E2E
Published: Apr 24

Unlocking end-to-end testing in Clerk applications

Securing your application is one of our top priorities here at Clerk. To that end, we incorporate several protections against automated bot traffic, implemented in our Web Application Firewall running at edge.

These safeguards, while effective against malicious bots, have historically interfered with end-to-end test suites. If you ever encountered a "Bot traffic detected" error in your tests, it's those protections in action.

Today we are releasing Testing Tokens - a feature that allows testing suites to run uninhibited by such security measures.

For usage instructions and Playwright integration, visit the Testing Tokens docs and the Playwright guide. Additionally, we will be working on an integration for Cypress in the future.

Testing Tokens are currently available in development instances, but may be expanded to production instances in the future.

For further info, feedback or issues, refer to the docs and the @clerk/testing package.

Apr 22

Passkeys in Beta

Category: Beta
Published: Apr 22

Passkeys are a simple-to-use and secure passwordless way to authenticate your users. Now available for your applications in Beta.

Forget remembering passwords! Based on the WebAuthn specification, passkeys are a new method to log in securely using your fingerprint, face scan, PIN, or pattern. This passwordless flow results in a more secure and easy-to-use sign-in flow for your users.

If you want to know more about passkeys in general, head to our blog and read our article: What are passkeys and how do they work?

Today we're thrilled to announce that passkeys are now in beta for all applications within Clerk.

Using passkeys with Clerk

Please take note that at the moment, enabling passkeys is only available for applications that are using "Core 2" version of the SDK which, for example, if you're using @clerk/next-js the package version should be >= 5.0.x.

During the beta, we recommend using the latest release of our SDKs to test out passkeys.

If you're using our <SignIn /> UI Component, you can enable passkeys for your users by activating Passkeys as an Authentication strategy in the Clerk Dashboard.

The easiest way to allow your users to create and manage their passkeys is to use the prebuilt <UserProfile /> component, which includes passkey management in the Security tab.

Beyond the all-in-one components, we provide handy helpers like createPasskey() and authenticateWithPasskey() for building your own flows. Learn more about rebuilding passkey authentication from scratch in our Custom Flows doc.

More about the Beta

While in Beta, enabling passkeys is free for all applications to use. We'd love for you to give it a try, and we'll be collecting all of your feedback along the way. If you have any feedback, please reach out at beta-passkeys@clerk.dev.

Apr 19

Clerk Core 2 is now Generally Available

Category: SDK
Published: Apr 19

Our latest major release (Core 2) is now Generally Available. Enjoy the new foundation of Clerk - featuring refreshed UI components, improved middleware helpers, and enhanced overall performance.

After a little over a month in Beta, we're making our latest major release Generally Available. Core 2 represents a massive overhaul to the way Clerk works under the hood and ships with a bunch of goodies for you and your users. Going forward, whenever you install one of our Clerk packages, you'll be able to take full advantage of the latest Core 2 features.

We want to thank everyone who participated in the beta and helped us get to this point 💜.

Head to our Core 2 Upgrade Guides or try one of our Quickstarts to get started with Core 2 today!

Apr 19

Visual Captcha for Bot Protection

Category: Bot Protection
Published: Apr 19

Fight bot detection false positives by showing a visual captcha challenge

Until recently, the Bot Protection feature was entirely invisible to end-users. While effective in most cases, occasionally real users were being wrongly identified as bots (aka. false positives) and were therefore blocked from signing up to the application, without having a way to rectify the error. To overcome this issue, users would have to reach out via support channels for remediation.

Clerk now expands the functionality of Bot Protection by offering more control over the widget, allowing your end-users to overcome such situations on their own. There are now two Bot Protection widget types:

Invisible: Render an invisible challenge if bot traffic is suspected. (This is what we had until now.)
Smart: Render an interactive challenge if bot traffic is suspected. Suspected users will have to click to the widget in order to prove they're not a bot.

For instances that had previously enabled Bot Protection, your settings are automatically set to Invisible as this was the previous default. In the near future, all new instances will default to Smart.

To configure your Bot Protection settings, head to the Attack Protection section of Clerk Dashboard and read more about Bot Protection.

Clerk Changelog