Skip to main content

Clerk Changelog

Official SDK for Vue and Nuxt

Category
SDK
Published

A community SDK gets its graduation day 🎓

We're excited to announce @clerk/vue and @clerk/nuxt, two new official SDKs that allow developers to add authentication and authorization into their Vue and Nuxt applications in a matter of minutes.

Both SDKs come fully equipped with Clerk's UI components, composables, and low-level utilities for your custom flows.

Use Clerk UI components

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 Vue.

pages/sign-in.vue
<script setup>
import { SignIn } from '@clerk/vue'
</script>

<template>
  <SignIn />
</template>

Protect API routes

For Nuxt users, use the auth context to restrict unauthorized access to your API routes.

server/api/me.ts
import { clerkClient } from '@clerk/nuxt/server'

export default eventHandler(async (event) => {
  const { userId } = event.context.auth

  if (!userId) {
    setResponseStatus(event, 401)
    return 'Unauthorized'
  }

  const user = await clerkClient(event).users.getUser(userId)

  return { user }
})

This is only a quick preview of all that @clerk/vue and @clerk/nuxt offer.

For more information on the available APIs and how to get started building Vue and Nuxt applications with Clerk, check out our Vue Quickstart guide and Nuxt Quickstart guide.

We extend our gratitude to all contributors of the previous community SDK for Vue, which served as the foundation for these official releases.

Contributor
Robert Soriano

URL-based active organization sync

Category
SDK
Published

Use an organization slug in your application URL to automatically set the active Clerk organization.

clerkMiddleware() now supports configuration to detect an organization by slug in a request's URL and automatically set that organization as active for the current session. Any client-side logic to handle syncing a session's active organization with the current URL can now be removed!

Try it today

To start using URL-based active organization syncing, see the clerkMiddleware() documentation.

To learn more about best practices for using organization slugs to manage the active organization, check out the new guide.

Contributors
Izaak Lauer
Robert Soriano
Laura Beatris
Bryce Kalow

Enterprise Connections for Organizations

Category
SSO
Published

Link Organizations to SSO Connections, allowing users to authenticate with their IdP and join organizations seamlessly.

After linking an organization to an enterprise connection, whenever users authenticate with their IdP, new sign-ups will automatically be added to the linked organization with the organization's default role and that organization will be set as active on the client side. Sign-ins will have the linked organization automatically set as their currently active organization.

If you're an application owner that previously found yourself detecting new sign-ups and sign-ins in an attempt to orchestrate the joining and setting active of an organization, all that code can now be removed.

Linked organizations are available for all enterprise connection types (SAML, OIDC, and EASIE) and we are planning to support more configurable enrollment modes in the future.

Try it today

If you have existing enterprise connections, head to Configure / SSO Connections and link your customer's organizations through the Clerk Dashboard. If you're looking for more detail, read through our full guide on how to configure an enterprise connection for an organization by visiting our Manage Organization SSO page.

Contributors
Mary Zhong
Izaak Lauer
Nicolas Lopes
Laura Beatris

Improved offline support for Expo

Category
SDK
Published

A better experience for your Expo apps.

We're excited to announce experimental offline support for Clerk's Expo SDK. This update significantly improves how Expo applications using Clerk handle network connectivity issues.

Key Features

  • Initialization of the Clerk SDK is now more resilient to network failures.
  • Faster resolution of the isLoaded property and the <ClerkLoaded> control component.
  • Network errors are no longer muted, allowing developers to catch and handle them effectively in their custom flows.
  • The getToken() function in the useAuth() hook now supports returning cached tokens, minimizing disruptions caused by network failures.

How to use

To try out the experimental offline support features, visit our documentation for step-by-step integration instructions for your Expo project.

Contributor
Stefanos Anagnostou

React Router SDK Beta

Category
SDK
Published

Add authentication and authorization to your React Router application in minutes with this new Clerk SDK.

We're excited to announce the beta release of @clerk/react-router, a new official SDK that allows developers to add authentication and authorization into their React Router application in a matter of minutes.

The SDK comes fully equipped with Clerk's UI components, server utilities, and low level utilities for any of your custom flows. You can use React Router both as a framework or library with Clerk.

If you want to dive right into it, head over to our React Router quickstart.

Use Clerk UI components

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 simple it is to build a sign-in page using Clerk's <SignIn /> component inside your React Router applications.

app/routes/sign-in.tsx
import { SignIn } from '@clerk/react-router'

export default function SignInPage() {
  return <SignIn />
}

Server functions

You can also pair our getAuth() utility function with React Routers's server data loading to protect your routes.

app/routes/profile.tsx
import { redirect } from 'react-router'
import { getAuth } from '@clerk/react-router/ssr.server'
import { createClerkClient } from '@clerk/react-router/api.server'
import type { Route } from './+types/profile'

export async function loader(args: Route.LoaderArgs) {
  const { userId } = await getAuth(args)

  if (!userId) {
    return redirect('/sign-in?redirect_url=' + args.request.url)
  }

  const user = await createClerkClient({ secretKey: process.env.CLERK_SECRET_KEY }).users.getUser(
    userId,
  )

  return {
    user: JSON.stringify(user),
  }
}

export default function Profile({ loaderData }: Route.ComponentProps) {
  return <p>Hello! Your user id is {loaderData.user.id}</p>
}

You can learn more about @clerk/react-router in the React Router reference documentation.

Contributor
Lennart Jörgens

Enterprise Connections for Custom OAuth Providers

Category
SSO
Published

Configure enterprise single sign-on through any custom OAuth provider

We're excited to announce that in addition to EASIE and SAML, you can now enable enterprise single sign-on through any OpenID Connect (OIDC) compliant provider.

Authenticate with Enterprise SSO

To support this, we have added a new authentication strategy to our SDKs, enterprise_sso. This strategy lets you start an enterprise sso flow with a single method, regardles if the users will be signing in through OIDC, SAML, or EASIE.

Get started

To learn how to configure a provider, visit our setup guide or explore our enterprise connections documentation to discover how enterprise SSO works in Clerk.

Contributor
Nikos Polykandriotis