@mulverse/mulguard-core 1.0.0

package/src/providers/workos.ts

@@ -0,0 +1,180 @@
+/**
+ * <div class="provider" style={{backgroundColor: "#000", display: "flex", justifyContent: "space-between", color: "#fff", padding: 16}}>
+ * <span>Built-in <b>WorkOS</b> integration.</span>
+ * <a href="https://workos.com/">
+ *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/workos.svg" height="48" />
+ * </a>
+ * </div>
+ *
+ * @module providers/workos
+ */
+import type { OAuthConfig, OAuthUserConfig } from "./index.js"
+/**
+ * - {@link https://workos.com/docs/reference/sso/profile | The returned profile object}
+ */
+export interface WorkOSProfile extends Record<string, any> {
+  object: string
+  id: string
+  organization_id: string
+  connection_id: string
+  connection_type: string
+  idp_id: string
+  email: string
+  first_name: string
+  last_name: string
+  raw_attributes: {
+    id: string
+    email: string
+    lastName: string
+    firstName: string
+    picture: string
+  }
+}
+
+/**
+ * Add WorkOS login to your page.
+ *
+ * ### Setup
+ *
+ * #### Callback URL
+ * ```
+ * https://example.com/api/auth/callback/workos
+ * ```
+ *
+ * #### Configuration
+ *```ts
+ * import { Auth } from "@auth/core"
+ * import WorkOS from "@auth/core/providers/workos"
+ *
+ * const request = new Request(origin)
+ * const response = await Auth(request, {
+ *   providers: [
+ *     WorkOS({
+ *       clientId: WORKOS_CLIENT_ID,
+ *       clientSecret: WORKOS_CLIENT_SECRET,
+ *       issuer: WORKOS_ISSUER,
+ *     }),
+ *   ],
+ * })
+ * ```
+ *
+ * ### Resources
+ *
+ * - [WorkOS SSO OAuth documentation](https://workos.com/docs/reference/sso)
+ *
+ * ### Notes
+ *
+ * By default, Auth.js assumes that the WorkOS provider is
+ * based on the [OAuth 2](https://www.rfc-editor.org/rfc/rfc6749.html) specification.
+ *
+ * WorkOS is not an identity provider itself, but, rather, a bridge to multiple single sign-on (SSO) providers.
+ * As a result, we need to make some additional changes to authenticate users using WorkOS.
+ *
+ * In order to sign a user in using WorkOS, we need to specify which WorkOS Connection to use.
+ * A common way to do this is to collect the user's email address and extract the domain. This can be done using a custom login page.
+ * To add a custom login page, you can use the `pages` option:
+ * ```ts
+ * pages: {
+ *   signIn: "/auth/signin",
+ * }
+ * ```
+ * We can then add a custom login page that displays an input where the user can enter their email address.
+ * We then extract the domain from the user's email address and pass it to the `authorizationParams` parameter on the `signIn` function:
+ * ```js title="pages/auth/signin.js"
+ * import { useState } from "react"
+ * import { getProviders, signIn } from "next-auth/react"
+ *
+ * export default function SignIn({ providers }) {
+ *   const [email, setEmail] = useState("")
+ *
+ *   return (
+ *     <>
+ *       {Object.values(providers).map((provider) => {
+ *         if (provider.id === "workos") {
+ *           return (
+ *             <div key={provider.id}>
+ *               <input
+ *                 type="email"
+ *                 value={email}
+ *                 placeholder="Email"
+ *                 onChange={(event) => setEmail(event.target.value)}
+ *               />
+ *               <button
+ *                 onClick={() =>
+ *                   signIn(provider.id, undefined, {
+ *                     domain: email.split("@")[1],
+ *                   })
+ *                 }
+ *               >
+ *                 Sign in with SSO
+ *               </button>
+ *             </div>
+ *           )
+ *         }
+ *
+ *         return (
+ *           <div key={provider.id}>
+ *             <button onClick={() => signIn(provider.id)}>
+ *               Sign in with {provider.name}
+ *             </button>
+ *           </div>
+ *         )
+ *       })}
+ *     </>
+ *   )
+ * }
+ *
+ * export async function getServerSideProps(context) {
+ *   const providers = await getProviders()
+ *   return {
+ *     props: { providers },
+ *   }
+ * }
+ * ```
+ *
+ * :::tip
+ *
+ * The WorkOS provider comes with a [default configuration](https://github.com/nextauthjs/next-auth/blob/main/packages/core/src/providers/workos.ts).
+ * To override the defaults for your use case, check out [customizing a built-in OAuth provider](https://authjs.dev/guides/configuring-oauth-providers).
+ *
+ * :::
+ *
+ * :::info **Disclaimer**
+ *
+ * If you think you found a bug in the default configuration, you can [open an issue](https://authjs.dev/new/provider-issue).
+ *
+ * Auth.js strictly adheres to the specification and it cannot take responsibility for any deviation from
+ * the spec by the provider. You can open an issue, but if the problem is non-compliance with the spec,
+ * we might not pursue a resolution. You can ask for more help in [Discussions](https://authjs.dev/new/github-discussions).
+ *
+ * :::
+ */
+export default function WorkOS<P extends WorkOSProfile>(
+  options: OAuthUserConfig<P> & { connection?: string }
+): OAuthConfig<P> {
+  const { issuer = "https://api.workos.com/", connection = "" } = options
+
+  const connectionParams = new URLSearchParams({ connection })
+
+  return {
+    id: "workos",
+    name: "WorkOS",
+    type: "oauth",
+    authorization: `${issuer}sso/authorize?${connectionParams}`,
+    token: `${issuer}sso/token`,
+    client: {
+      token_endpoint_auth_method: "client_secret_post",
+    },
+    userinfo: `${issuer}sso/profile`,
+    profile(profile) {
+      return {
+        id: profile.id,
+        name: `${profile.first_name} ${profile.last_name}`,
+        email: profile.email,
+        image: profile.raw_attributes.picture ?? null,
+      }
+    },
+    style: { bg: "#6363f1", text: "#fff" },
+    options,
+  }
+}

package/src/providers/yandex.ts

@@ -0,0 +1,159 @@
+/**
+ * <div class="provider" style={{backgroundColor: "#ffcc00", display: "flex", justifyContent: "space-between", color: "#000", padding: 16}}>
+ * <span>Built-in <b>Yandex</b> integration.</span>
+ * <a href="https://yandex.com">
+ *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/yandex.svg" height="48" width="48"/>
+ * </a>
+ * </div>
+ *
+ * @module providers/yandex
+ */
+
+import { OAuthConfig, OAuthUserConfig } from "./oauth.js"
+
+/**
+ * - {@link https://yandex.com/dev/id/doc/en/user-information | Getting information about the user}
+ * - {@link https://yandex.com/dev/id/doc/en/user-information#email-access | Access to email address}
+ * - {@link https://yandex.com/dev/id/doc/en/user-information#avatar-access | Access to the user's profile picture}
+ * - {@link https://yandex.com/dev/id/doc/en/user-information#birthday-access | Access to the date of birth}
+ * - {@link https://yandex.com/dev/id/doc/en/user-information#name-access | Access to login, first name, last name, and gender}
+ * - {@link https://yandex.com/dev/id/doc/en/user-information#phone-access | Access to the phone number}
+ */
+export interface YandexProfile {
+  /** User's Yandex login. */
+  login: string
+  /** Yandex user's unique ID. */
+  id: string
+  /**
+   * The ID of the app the OAuth token in the request was issued for.
+   * Available in the [app properties](https://oauth.yandex.com/). To open properties, click the app name.
+   */
+  client_id: string
+  /** Authorized Yandex user ID. It is formed on the Yandex side based on the `client_id` and `user_id` pair. */
+  psuid: string
+  /** An array of the user's email addresses. Currently only includes the default email address. */
+  emails?: string[]
+  /** The default email address for contacting the user. */
+  default_email?: string
+  /**
+   * Indicates that the stub (profile picture that is automatically assigned when registering in Yandex)
+   * ID is specified in the `default_avatar_id` field.
+   */
+  is_avatar_empty?: boolean
+  /**
+   * ID of the Yandex user's profile picture.
+   * Format for downloading user avatars: `https://avatars.yandex.net/get-yapic/<default_avatar_id>/<size>`
+   * @example "https://avatars.yandex.net/get-yapic/31804/BYkogAC6AoB17bN1HKRFAyKiM4-1/islands-200"
+   * Available sizes:
+   * `islands-small`: 28×28 pixels.
+   * `islands-34`: 34×34 pixels.
+   * `islands-middle`: 42×42 pixels.
+   * `islands-50`: 50×50 pixels.
+   * `islands-retina-small`: 56×56 pixels.
+   * `islands-68`: 68×68 pixels.
+   * `islands-75`: 75×75 pixels.
+   * `islands-retina-middle`: 84×84 pixels.
+   * `islands-retina-50`: 100×100 pixels.
+   * `islands-200`: 200×200 pixels.
+   */
+  default_avatar_id?: string
+  /**
+   * The user's date of birth in YYYY-MM-DD format.
+   * Unknown elements of the date are filled in with zeros, such as: `0000-12-23`.
+   * If the user's date of birth is unknow, birthday will be `null`
+   */
+  birthday?: string | null
+  first_name?: string
+  last_name?: string
+  display_name?: string
+  /**
+   * The first and last name that the user specified in Yandex ID.
+   * Non-Latin characters of the first and last names are presented in Unicode format.
+   */
+  real_name?: string
+  /** User's gender. `null` Stands for unknown or unspecified gender. Will be `undefined` if not provided by Yandex. */
+  sex?: "male" | "female" | null
+  /**
+   * The default phone number for contacting the user.
+   * The API can exclude the user's phone number from the response at its discretion.
+   * The field contains the following parameters:
+   * id: Phone number ID.
+   * number: The user's phone number.
+   */
+  default_phone?: { id: number; number: string }
+}
+
+/**
+ * Add Yandex login to your page.
+ *
+ * ### Setup
+ *
+ * #### Callback URL
+ * ```
+ * https://example.com/api/auth/callback/yandex
+ * ```
+ *
+ * #### Configuration
+ * ```ts
+ * import { Auth } from "@auth/core"
+ * import Yandex from "@auth/core/providers/yandex"
+ *
+ * const request = new Request(origin)
+ * const response = await Auth(request, {
+ *   providers: [
+ *     Yandex({ clientId: YANDEX_CLIENT_ID, clientSecret: YANDEX_CLIENT_SECRET }),
+ *   ],
+ * })
+ * ```
+ *
+ * ### Resources
+ *
+ * - [Yandex - Creating an OAuth app](https://yandex.com/dev/id/doc/en/register-client#create)
+ * - [Yandex - Manage OAuth apps](https://oauth.yandex.com/)
+ * - [Yandex - OAuth documentation](https://yandex.com/dev/id/doc/en/)
+ * - [Learn more about OAuth](https://authjs.dev/concepts/oauth)
+ * - [Source code](https://github.com/nextauthjs/next-auth/blob/main/packages/core/src/providers/yandex.ts)
+ *
+ *:::tip
+ * The Yandex provider comes with a [default configuration](https://github.com/nextauthjs/next-auth/blob/main/packages/core/src/providers/yandex.ts).
+ * To override the defaults for your use case, check out [customizing a built-in OAuth provider](https://authjs.dev/guides/configuring-oauth-providers).
+ * :::
+ *
+ * :::info **Disclaimer**
+ * If you think you found a bug in the default configuration, you can [open an issue](https://authjs.dev/new/provider-issue).
+ *
+ * Auth.js strictly adheres to the specification and it cannot take responsibility for any deviation from
+ * the spec by the provider. You can open an issue, but if the problem is non-compliance with the spec,
+ * we might not pursue a resolution. You can ask for more help in [Discussions](https://authjs.dev/new/github-discussions).
+ * :::
+ */
+export default function Yandex(
+  options: OAuthUserConfig<YandexProfile>
+): OAuthConfig<YandexProfile> {
+  return {
+    id: "yandex",
+    name: "Yandex",
+    type: "oauth",
+    /** @see [Data access](https://yandex.com/dev/id/doc/en/register-client#access) */
+    authorization:
+      "https://oauth.yandex.ru/authorize?scope=login:info+login:email+login:avatar",
+    token: "https://oauth.yandex.ru/token",
+    userinfo: "https://login.yandex.ru/info?format=json",
+    profile(profile) {
+      return {
+        id: profile.id,
+        name: profile.display_name ?? profile.real_name ?? profile.first_name,
+        email: profile.default_email ?? profile.emails?.[0] ?? null,
+        image:
+          !profile.is_avatar_empty && profile.default_avatar_id
+            ? `https://avatars.yandex.net/get-yapic/${profile.default_avatar_id}/islands-200`
+            : null,
+      }
+    },
+    style: {
+      bg: "#ffcc00",
+      text: "#000",
+    },
+    options,
+  }
+}

package/src/providers/zitadel.ts

@@ -0,0 +1,128 @@
+/**
+ * <div class="provider" style={{backgroundColor: "#000", display: "flex", justifyContent: "space-between", color: "#fff", padding: 16}}>
+ * <span>Built-in <b>Zitadel</b> integration.</span>
+ * <a href="https://zitadel.com/">
+ *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/zitadel.svg" height="48"/>
+ * </a>
+ * </div>
+ *
+ * @module providers/zitadel
+ */
+
+import type { OIDCConfig, OAuthUserConfig } from "./index.js"
+
+/**
+ * The returned user profile from ZITADEL when using the profile callback. See the standard claims reference [here](https://zitadel.com/docs/apis/openidoauth/claims#standard-claims).
+ * If you need access to ZITADEL APIs or need additional information, make sure to add the corresponding scopes.
+ */
+export interface ZitadelProfile extends Record<string, any> {
+  amr: string // Authentication Method References as defined in RFC8176
+  aud: string // The audience of the token, by default all client id's and the project id are included
+  auth_time: number // UNIX time of the authentication
+  azp: string // Client id of the client who requested the token
+  email: string // Email Address of the subject
+  email_verified: boolean // if the email was verified by ZITADEL
+  exp: number // Time the token expires (as unix time)
+  family_name: string // The subjects family name
+  given_name: string // Given name of the subject
+  gender: string // Gender of the subject
+  iat: number // Time of the token was issued at (as unix time)
+  iss: string // Issuing domain of a token
+  jti: string // Unique id of the token
+  locale: string // Language from the subject
+  name: string // The subjects full name
+  nbf: number // Time the token must not be used before (as unix time)
+  picture: string // The subjects profile picture
+  phone: string // Phone number provided by the user
+  phone_verified: boolean // if the phonenumber was verified by ZITADEL
+  preferred_username: string // ZITADEL's login name of the user. Consist of username@primarydomain
+  sub: string // Subject ID of the user
+}
+
+/**
+ * Add ZITADEL login to your page.
+ *
+ * ### Setup
+ *
+ * #### Callback URL
+ * ```
+ * https://example.com/api/auth/callback/zitadel
+ * ```
+ *
+ * #### Configuration
+ *```ts
+ * import { Auth } from "@auth/core"
+ * import ZITADEL from "@auth/core/providers/zitadel"
+ *
+ * const request = new Request(origin)
+ * const response = await Auth(request, {
+ *   providers: [
+ *     ZITADEL({
+ *       clientId: ZITADEL_CLIENT_ID,
+ *       clientSecret: ZITADEL_CLIENT_SECRET,
+ *     }),
+ *   ],
+ * })
+ * ```
+ *
+ * ### Resources
+ * - [ZITADEL OpenID Endpoints](https://zitadel.com/docs/apis/openidoauth/endpoints)
+ * - [ZITADEL recommended OAuth Flows](https://zitadel.com/docs/guides/integrate/oauth-recommended-flows)
+ *
+ * ### Notes
+ *
+ * By default, Auth.js assumes that the ZITADEL provider is
+ * based on the [Open ID Connect](https://openid.net/specs/openid-connect-core-1_0.html) specification.
+ *
+ * The Redirect URIs used when creating the credentials must include your full domain and end in the callback path. For example:
+ * - For production: `https://{YOUR_DOMAIN}/api/auth/callback/zitadel`
+ * - For development: `http://localhost:3000/api/auth/callback/zitadel`
+ *
+ * Make sure to enable dev mode in ZITADEL console to allow redirects for local development.
+ *
+ * :::tip
+ *
+ * The ZITADEL provider comes with a [default configuration](https://github.com/nextauthjs/next-auth/blob/main/packages/core/src/providers/zitadel.ts).
+ * To override the defaults for your use case, check out [customizing a built-in OAuth provider](https://authjs.dev/guides/configuring-oauth-providers).
+ *
+ * :::
+ * :::tip
+ *
+ * ZITADEL also returns a email_verified boolean property in the profile. You can use this property to restrict access to people with verified accounts.
+ * ```ts
+ * const options = {
+ *   ...
+ *   callbacks: {
+ *     async signIn({ account, profile }) {
+ *       if (account.provider === "zitadel") {
+ *         return profile.email_verified;
+ *       }
+ *       return true; // Do different verification for other providers that don't have `email_verified`
+ *     },
+ *   }
+ *   ...
+ * }
+ * ```
+ *
+ * :::
+ *
+ * :::info **Disclaimer**
+ *
+ * If you think you found a bug in the default configuration, you can [open an issue](https://authjs.dev/new/provider-issue).
+ *
+ * Auth.js strictly adheres to the specification and it cannot take responsibility for any deviation from
+ * the spec by the provider. You can open an issue, but if the problem is non-compliance with the spec,
+ * we might not pursue a resolution. You can ask for more help in [Discussions](https://authjs.dev/new/github-discussions).
+ *
+ * :::
+ */
+export default function ZITADEL<P extends ZitadelProfile>(
+  options: OAuthUserConfig<P>
+): OIDCConfig<P> {
+  return {
+    id: "zitadel",
+    name: "ZITADEL",
+    type: "oidc",
+    options,
+  }
+}

package/src/providers/zoho.ts

@@ -0,0 +1,84 @@
+/**
+ * <div class="provider" style={{backgroundColor: "#000", display: "flex", justifyContent: "space-between", color: "#fff", padding: 16}}>
+ * <span>Built-in <b>ZOHO</b> integration.</span>
+ * <a href="https://zoho.com/">
+ *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/zoho.svg" height="48" />
+ * </a>
+ * </div>
+ *
+ * @module providers/zoho
+ */
+
+import type { OAuthConfig, OAuthUserConfig } from "./index.js"
+/**
+ * Add ZOHO login to your page.
+ *
+ * ### Setup
+ *
+ * #### Callback URL
+ * ```
+ * https://example.com/api/auth/callback/zoho
+ * ```
+ *
+ * #### Configuration
+ *```ts
+ * import { Auth } from "@auth/core"
+ * import ZOHO from "@auth/core/providers/zoho"
+ *
+ * const request = new Request(origin)
+ * const response = await Auth(request, {
+ *   providers: [
+ *     ZOHO({ clientId: ZOHO_CLIENT_ID, clientSecret: ZOHO_CLIENT_SECRET }),
+ *   ],
+ * })
+ * ```
+ *
+ * ### Resources
+ *
+ * - [Zoho OAuth 2.0 Integration Guide](https://www.zoho.com/accounts/protocol/oauth/web-server-applications.html)
+ * - [Zoho API Console](https://api-console.zoho.com)
+ *
+ * ### Notes
+ *
+ * By default, Auth.js assumes that the ZOHO provider is
+ * based on the [OAuth 2](https://www.rfc-editor.org/rfc/rfc6749.html) specification.
+ *
+ * :::tip
+ *
+ * The ZOHO provider comes with a [default configuration](https://github.com/nextauthjs/next-auth/blob/main/packages/core/src/providers/zoho.ts).
+ * To override the defaults for your use case, check out [customizing a built-in OAuth provider](https://authjs.dev/guides/configuring-oauth-providers).
+ *
+ * :::
+ *
+ * :::info **Disclaimer**
+ *
+ * If you think you found a bug in the default configuration, you can [open an issue](https://authjs.dev/new/provider-issue).
+ *
+ * Auth.js strictly adheres to the specification and it cannot take responsibility for any deviation from
+ * the spec by the provider. You can open an issue, but if the problem is non-compliance with the spec,
+ * we might not pursue a resolution. You can ask for more help in [Discussions](https://authjs.dev/new/github-discussions).
+ *
+ * :::
+ */
+export default function Zoho(
+  config: OAuthUserConfig<Record<string, any>>
+): OAuthConfig<Record<string, any>> {
+  return {
+    id: "zoho",
+    name: "Zoho",
+    type: "oauth",
+    authorization:
+      "https://accounts.zoho.com/oauth/v2/auth?scope=AaaServer.profile.Read",
+    token: "https://accounts.zoho.com/oauth/v2/token",
+    userinfo: "https://accounts.zoho.com/oauth/user/info",
+    profile(profile) {
+      return {
+        id: profile.ZUID,
+        name: `${profile.First_Name} ${profile.Last_Name}`,
+        email: profile.Email,
+        image: null,
+      }
+    },
+    options: config,
+  }
+}

package/src/providers/zoom.ts

@@ -0,0 +1,119 @@
+/**
+ * <div class="provider" style={{backgroundColor: "#000", display: "flex", justifyContent: "space-between", color: "#fff", padding: 16}}>
+ * <span>Built-in <b>Zoom</b> integration.</span>
+ * <a href="https://zoom.us/">
+ *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/zoom.svg" height="48" />
+ * </a>
+ * </div>
+ *
+ * @module providers/zoom
+ */
+
+import type { OAuthConfig, OAuthUserConfig } from "./index.js"
+
+/**
+ * See: https://developers.zoom.us/docs/integrations/oauth/#using-an-access-token
+ */
+export interface ZoomProfile extends Record<string, any> {
+  id: string
+  first_name: string
+  last_name: string
+  email: string
+  type: number
+  role_name: string
+  pmi: number
+  use_pmi: boolean
+  vanity_url: string
+  personal_meeting_url: string
+  timezone: string
+  verified: number
+  dept: string
+  created_at: string
+  last_login_time: string
+  last_client_version: string
+  pic_url: string
+  host_key: string
+  jid: string
+  group_ids: string[]
+  im_group_ids: string[]
+  account_id: string
+  language: string
+  phone_country: string
+  phone_number: string
+  status: string
+}
+
+/**
+ * Add Zoom login to your page.
+ *
+ * ### Setup
+ *
+ * #### Callback URL
+ * ```
+ * https://example.com/api/auth/callback/zoom
+ * ```
+ *
+ * #### Configuration
+ *```ts
+ * import { Auth } from "@auth/core"
+ * import Zoom from "@auth/core/providers/zoom"
+ *
+ * const request = new Request(origin)
+ * const response = await Auth(request, {
+ *   providers: [
+ *     Zoom({ clientId: ZOOM_CLIENT_ID, clientSecret: ZOOM_CLIENT_SECRET }),
+ *   ],
+ * })
+ * ```
+ *
+ * ### Resources
+ *
+ * - [Zoom OAuth 2.0 Integration Guide](https://developers.zoom.us/docs/integrations/oauth/)
+ *
+ * ### Notes
+ *
+ * By default, Auth.js assumes that the Zoom provider is
+ * based on the [OAuth 2](https://www.rfc-editor.org/rfc/rfc6749.html) specification.
+ *
+ * :::tip
+ *
+ * The Zoom provider comes with a [default configuration](https://github.com/nextauthjs/next-auth/blob/main/packages/core/src/providers/zoom.ts).
+ * To override the defaults for your use case, check out [customizing a built-in OAuth provider](https://authjs.dev/guides/configuring-oauth-providers).
+ *
+ * :::
+ *
+ * :::info **Disclaimer**
+ *
+ * If you think you found a bug in the default configuration, you can [open an issue](https://authjs.dev/new/provider-issue).
+ *
+ * Auth.js strictly adheres to the specification and it cannot take responsibility for any deviation from
+ * the spec by the provider. You can open an issue, but if the problem is non-compliance with the spec,
+ * we might not pursue a resolution. You can ask for more help in [Discussions](https://authjs.dev/new/github-discussions).
+ *
+ * :::
+ */
+export default function Zoom(
+  config: OAuthUserConfig<ZoomProfile>
+): OAuthConfig<ZoomProfile> {
+  return {
+    id: "zoom",
+    name: "Zoom",
+    type: "oauth",
+    authorization: "https://zoom.us/oauth/authorize?scope",
+    token: "https://zoom.us/oauth/token",
+    userinfo: "https://api.zoom.us/v2/users/me",
+    profile(profile) {
+      return {
+        id: profile.id,
+        name: `${profile.first_name} ${profile.last_name}`,
+        email: profile.email,
+        image: profile.pic_url,
+      }
+    },
+    style: {
+      bg: "#0b5cff",
+      text: "#fff",
+    },
+    options: config,
+  }
+}