Passkeys are now generally available for all Clerk users
After a thorough beta period, we're excited to announce that Passkeys are now generally available for all Clerk users. Passkeys are a simple-to-use and secure passwordless way to authenticate your users.
Passkeys are available as part of the Pro plan. Head to the Clerk Dashboard to activate Passkeys for your users or read through the Passkeys documentation to get started.
Enhanced end-to-end testing with Clerk using Cypress
We are thrilled to announce significant enhancements to our @clerk/testing package, making it easier to use Cypress with Clerk!
@clerk/testing@1.2.0 includes the following improvements:
cy.clerkSignIn() and cy.clerkSignOut(), make it easy to handle sign-in and sign-out actions within your tests without interacting with the UI.To learn more and get detailed setup instructions, visit our Cypress documentation.
Our community SDK is all grown up 🧑🚀
Astro is one of the most loved web frameworks for the past couple of years, it's a modern framework for fast content-driven websites, while also making it trivial to create dynamic web applications.
Today, we're proud to announce @clerk/astro, a new official SDK that allows developers to add authentication and authorization into their Astro application in matter of minutes.
The SDK comes fully equiped with Clerk's UI components, middleware, and low level utilities for your custom flows.
Clerk's pre-built UI components give you a beautiful, fully-functional user and organization management experience in minutes. Here's an example on how to use the <SignIn /> component in Astro.
---
import { SignIn } from '@clerk/astro/components'
---
<SignIn path="/sign-in" />Use clerkMiddleware and the auth function to restrict logged out users from accessing the /user routes.
import { clerkMiddleware, createRouteMatcher } from '@clerk/astro/server'
const isProtectedPage = createRouteMatcher(['/user(.*)'])
export const onRequest = clerkMiddleware((auth, context, next) => {
if (isProtectedPage(context.request) && !auth().userId) {
return auth().redirectToSignIn()
}
return next()
})If the /me page is not protected by the middleware, you can still protect the page directly. The code below uses Astro.locals.auth() in order redirect the user the sign-in page or render their userId.
---
const { userId, redirectToSignIn } = Astro.locals.auth()
if (!userId) {
return redirectToSignIn()
}
---
<p>My user id is {userId}</p>Astro offers a way to use React inside your Astro application. @clerk/astro takes advantage of that and exposes components, hooks, and utilities for those cases.
import { SignInButton, SignedIn, SignedOut, UserButton } from '@clerk/astro/react'
export default function Header() {
return (
<>
<p>My App</p>
<SignedOut>
<SignInButton />
</SignedOut>
<SignedIn>
<UserButton />
</SignedIn>
</>
)
}This is only a quick preview of all that @clerk/astro offers.
For more information on the available API and how to get started building Astro applications with Clerk, check out our Astro Quickstart guide.
And last but not least, we would like to acknowledge and thank all of the contributors of the previous community SDK for Astro, which was a great source of inspiration for us.
@clerk/remix now supports Remix SPA Mode
Starting with @clerk/remix@4.2.0 our Remix SDK now supports Remix SPA mode. This means that you can now use Clerk in your Remix app without server-side rendering.
After creating a Remix app with SPA mode enabled, install the latest @clerk/remix package:
npm install @clerk/remix@latestyarn add @clerk/remix@latestpnpm add @clerk/remix@latestYou can then use ClerkApp inside your root route and use Clerk's control components to protect your pages. Clerk will automatically detect that your Remix app is running in SPA mode and will take care of the rest.
To read the full guide and learn more about Clerk and Remix SPA Mode, head over to the Remix SPA mode reference guide.
Keys and options passed to clerkMiddleware() at runtime are available in Clerk’s server-side helpers.
Users building a multi-tenant application might need to provide different Clerk keys depending on the incoming request. Previously, you would need to pass these keys to all of Clerk’s Next.js server-side helpers. With Dynamic Keys support, keys passed to clerkMiddleware() are made available to auth() and other server-side helpers.
import { clerkMiddleware } from '@clerk/nextjs/server'
export default clerkMiddleware({
secretKey: '<YOUR_SECRET_KEY>',
publishableKey: '<YOUR_PUBLISHABLE_KEY>',
signInUrl: '/my-sign-in',
signUpUrl: '/my-sign-up',
})
export const config = {
matcher: ['/((?!.*\\..*|_next).*)', '/', '/(api|trpc)(.*)'],
}With a centralized place for passing server-side options, implementing a multi-tenant application that requires dynamic Clerk keys should be much more straightforward. This feature is available as of @clerk/nextjs@5.2.x.
Check out the documentation for additional details and happy building!
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.
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.
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.