Best Practices for Handling Token Refresh in Cal.com Integration

[vaibhav135]

Hello,
I'm integrating Cal.com into our Next.js application using the CalProvider component. I have a question about token refresh handling:
When using the CalProvider with an accessToken and refreshUrl:

<CalProvider
    accessToken={token}
    options={{
        refreshUrl: '/api/auth/calcom/refresh'
    }}
>

If the accessToken expires and Cal.com makes a refresh token request to our server through refreshUrl, how can our application be notified of the new token? We want to ensure that subsequent Cal.com operations use the fresh token instead of the expired one.
Specifically:

• Is there an event or callback mechanism to notify our application when a token is refreshed?
• What is the recommended approach to keep the accessToken prop in sync with token refreshes?
• Are there any best practices for managing token lifecycle in a Cal.com integration?

Thank you for your help!

[dosubot[bot]]

Hey @vaibhav135! 👋 I'm here to help you out with any bugs, questions, or contributions you need!

To handle token refresh in your Cal.com integration using the CalProvider component, you can use the useOAuthFlow hook, which is designed to manage the token lifecycle and keep the accessToken prop in sync with token refreshes.

1. Notification of New Token: The useOAuthFlow hook provides an onSuccess callback that is called when a new token is successfully obtained. You can use this callback to update any components or state in your application that depend on the access token.

2. Keeping accessToken in Sync: The hook manages the clientAccessToken state internally and updates it whenever a new token is received. This ensures that the accessToken prop is always in sync with the latest token.

3. Best Practices:

   • Use the onSuccess callback to handle updates in your application when a token is refreshed.
   • Handle errors gracefully using the onError callback to inform users or retry the operation.
   • Ensure that your application logic uses the currentAccessToken provided by the hook for all Cal.com operations.

Here's a simplified example of how you might implement this:

import { useOAuthFlow } from 'path-to-useOAuthFlow';

const MyComponent = () => {
  const { isRefreshing, currentAccessToken } = useOAuthFlow({
    accessToken: initialAccessToken,
    refreshUrl: '/api/auth/calcom/refresh',
    clientId: process.env.NEXT_PUBLIC_X_CAL_ID ?? '',
    onSuccess: () => {
      console.log('Token refreshed successfully');
    },
    onError: (error) => {
      console.error('Error refreshing token:', error);
    },
  });

  // Use currentAccessToken in your application
  return <div>Current Access Token: {currentAccessToken}</div>;
};

This setup ensures that your application is notified of new tokens and can handle token refreshes effectively ^[1][2].

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Other}

[vaibhav135]

@dosu what is the import path for this OAuthFlow? Also it seems like this hook is no longer available in the new cal atoms package.

[dosubot[bot]]

It seems like the useOAuthFlow hook might not be available in the new Cal atoms package. The import path for the useOAuthFlow hook was packages/platform/atoms/hooks/useOAuthFlow.ts, but if it's no longer available, you might need to explore alternative methods for handling token refresh in your integration.

Since this is a bit tricky, it might be helpful to get some input from the maintainers. @keithwillcode, could you provide some guidance on how to handle token refresh with the latest version of the Cal atoms package?

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Other}

[vaibhav135]

Closing this issue. Since there was a bug in our backend due to which, cal was not able to get the accessToken in response for the refresh request.