[docs] Adding Calendly OAuth2 Guide (expo#27326)

# Why

<!--
Please describe the motivation for this PR, and link to relevant GitHub
issues, forums posts, or feature requests.
-->

Adding guide for Calendly API OAuth2 using expo auth session package

# Checklist

<!--
Please check the appropriate items below if they apply to your diff.
This is required for changes to Expo modules.
-->

- [x] Documentation is up to date to reflect these changes (eg:
https://docs.expo.dev and README.md).
- [x] Conforms with the [Documentation Writing Style
Guide](https://github.com/expo/expo/blob/main/guides/Expo%20Documentation%20Writing%20Style%20Guide.md)
- [ ] This diff will work correctly for `npx expo prebuild` & EAS Build
(eg: updated a module plugin).

---------

Co-authored-by: superboo0311 <[email protected]>
Co-authored-by: Aman Mittal <[email protected]>

docs/pages/guides/authentication.mdx

@@ -38,6 +38,7 @@ If you'd like to see more, you can [open a PR](https://github.com/expo/expo/edit
     protocol={['OAuth 2', 'OpenID']}
     image={ASSETS.beyondidentity}
   />
+  <GridItem title="Calendly" protocol={['OAuth 2']} image={ASSETS.calendly} />
   <GridItem title="Cognito" protocol={['OAuth 2', 'OpenID']} image={ASSETS.cognito} />
   <GridItem title="Coinbase" protocol={['OAuth 2']} image={ASSETS.coinbase} />
   <GridItem title="Descope" protocol={['OAuth 2', 'OpenID']} image={ASSETS.descope} />
@@ -72,6 +73,7 @@ If you'd like to see more, you can [open a PR](https://github.com/expo/expo/edit
   <GridItem title="Twitch" protocol={['OAuth 2']} image={ASSETS.twitch} />
   <GridItem title="Twitter" protocol={['OAuth 2']} image={ASSETS.twitter} />
   <GridItem title="Uber" protocol={['OAuth 2']} image={ASSETS.uber} />
+
 </Grid>
 
 <Box
@@ -486,6 +488,116 @@ export default function App() {
 </Box>
 {/* End Beyond Identity */}
 
+{/* Start Calendly*/}
+<Box
+  name="Calendly"
+  createUrl="https://developer.calendly.com/getting-started"
+  image={ASSETS.calendly}
+>
+| Website                   | Provider  | PKCE      | Auto Discovery |
+| ------------------------- | --------- | --------- | -------------- |
+| [Get Your Config](https://developer.calendly.com/getting-started) | OAuth 2.0 | Supported | Not Available  |
+- `redirectUri` requires 2 slashes (`://`).
+- Example redirectUri:
+  - Standalone / development build: `myapp://*`
+  - Web: `https://yourwebsite.com/*`
+<Tabs tabs={["Auth Code"]}>
+
+<Tab>
+
+{/* prettier-ignore */}
+```jsx Calendly Example
+import * as WebBrowser from 'expo-web-browser';
+import {
+  makeRedirectUri,
+  useAuthRequest,
+  exchangeCodeAsync,
+} from "expo-auth-session";
+import React, { useEffect, useState } from "react";
+
+/* @info <strong>Web only:</strong> This method should be invoked on the page that the auth popup gets redirected to on web, it'll ensure that authentication is completed properly. On native, this does nothing. */
+WebBrowser.maybeCompleteAuthSession();
+/* @end */
+
+const discovery = {
+  authorizationEndpoint: "https://auth.calendly.com/oauth/authorize",
+  tokenEndpoint: "https://auth.calendly.com/oauth/token",
+};
+
+export default function App() {
+  const [authTokens, setAuthTokens] = useState({access_token: "", refresh_token: ""});
+  const [request, response, promptAsync] = useAuthRequest(
+    {
+      clientId: /* @info Your client id. Can be hardcoded or put it in .env file */ process.env.EXPO_PUBLIC_Client_ID /* @end */,
+      usePKCE: true,
+      redirectUri: makeRedirectUri({
+        native: /* @info Set up scheme property in your app.json or app.config.js. For example, app.json {scheme: "myapp"} */ "myapp://" /* @end */, 
+      }),
+    },
+    discovery
+  );
+  
+  useEffect(() => {
+    const exchange = async (exchangeTokenReq) => {
+      try {
+        const exchangeTokenResponse = await exchangeCodeAsync(
+          {
+            clientId: process.env.EXPO_PUBLIC_Client_ID,
+            code: /* @info Received code from first request*/ exchangeTokenReq /* @end */,
+            redirectUri: makeRedirectUri({
+              native: "myapp://",
+            }),
+            extraParams: {
+              code_verifier: request.codeVerifier,
+            },
+          },
+          discovery
+        );
+        setAuthTokens(exchangeTokenResponse);
+      } catch (error) {
+        console.error("error", error);
+      }
+    };
+
+    if (response) {
+      if (response.error) {
+        console.error(
+          "Authentication error",
+          response.params.error_description || "something went wrong"
+        );
+      }
+      if (response.type === "success") {
+        /* @info Exchange Received Code for Access Token */
+        exchange( response.params.code);
+        /* @end */
+      }
+    }
+  }, [discovery, request, response]);
+
+  return (
+  <SafeAreaView>
+      <View>
+        <Text>0Auth2</Text>
+        <Button
+          title="Connect to Calendly"
+          onPress={() => {
+            /* @info Prompt the user to authenticate in a user interaction or web browsers will block it. */
+            promptAsync();
+            /* @end */
+          }}
+        />
+        <Text>AuthTokens: {JSON.stringify(authTokens)}</Text>
+      </View>
+  </SafeAreaView>
+  )
+}
+
+```
+</Tab>
+</Tabs>
+</Box>
+{/* End Calendly*/}
+
 <Box
   name="Cognito"
   createUrl="https://console.aws.amazon.com/cognito/v2/idp/user-pools"

docs/ui/components/Authentication/index.ts

@@ -3,12 +3,12 @@ export { GridItem } from './GridItem';
 export { Box } from './Box';
 
 const ASSETS_PATH = '/static/images/sdk/auth-session/';
-
 export const ASSETS = {
   apple: ASSETS_PATH + 'apple.png',
   asgardeo: ASSETS_PATH + 'asgardeo.png',
   azure: ASSETS_PATH + 'azure.png',
   beyondidentity: ASSETS_PATH + 'beyondidentity.png',
+  calendly: ASSETS_PATH + 'calendly.svg',
   cognito: ASSETS_PATH + 'cognito.png',
   coinbase: ASSETS_PATH + 'coinbase.png',
   id4: ASSETS_PATH + 'identity4.png',