---
title: "Cal Provider"
---

Cal Provider is used to setup scheduling within your app. It is used in the root of your app, be it _app.js or or _app.tsx in case of
Next.js or App.js or App.ts in case of React. Here is an example:


```js
import "@calcom/atoms/globals.min.css";
import { CalProvider } from '@calcom/atoms';

function MyApp({ Component, pageProps }) {
  const accessToken = "managed-user-access-token";

  return (
    <CalProvider
      clientId={process.env.CAL_OAUTH_CLIENT_ID ?? ""}
      options={{
        apiUrl: process.env.CAL_API_URL ?? "https://api.cal.com/v2",
        refreshUrl: process.env.REFRESH_URL
      }}
      accessToken={accessToken}
    >
      <Component {...pageProps} />
    </CalProvider>
  );
}

export default MyApp;
```

Below is a list of props that can be passed to the Cal Provider.

| Name                       | Required | Description                                                                                           |
|:----------------------------|:----------|:-------------------------------------------------------------------------------------------------------|
| clientId                   | Yes      | Your OAuth client ID                                                                          |
| options                    | Yes       | Configuration options - `apiUrl` (should be https://api.cal.com/v2) and `refreshUrl` (URL of endpoint you have to build that to which atoms will send expired access tokens and receive new one in return. Read how to set it up [here](https://cal.com/docs/platform/quickstart#4-backend%3A-setting-up-a-refresh-token-endpoint)) and `readingDirection` (defaults to "ltr" but can also pass "rtl" which will change direction of UI components)                                                 |
| accessToken                | No       | The access token of your managed user for whom cal handles scheduling.                                                                |
| autoUpdateTimezone         | No       | Whether to automatically update managed user timezone (default: true)                                          |
| language                   | No       | Language code (default: "en")                                                                          |
| organizationId             | No       | ID of your organization                                                                                |