Repository: medusajs/medusa
File: packages/admin/dashboard/src/routes/login/components/cloud-auth-login.tsx (TypeScript)

Code before:
import { Button, toast } from "@medusajs/ui"
import { useMutation } from "@tanstack/react-query"
import { useEffect, useRef } from "react"
import { useTranslation } from "react-i18next"
import { decodeToken } from "react-jwt"
import { useNavigate, useSearchParams } from "react-router-dom"
import { useCreateCloudAuthUser } from "../../../hooks/api/cloud"
import { sdk } from "../../../lib/client"

const CLOUD_AUTH_PROVIDER = "cloud"

export const CloudAuthLogin = () => {
  const { t } = useTranslation()
  const [searchParams] = useSearchParams()

  const { handleCallback, isCallbackPending } = useAuthCallback(searchParams)

  // Check if we're returning from the OAuth callback
  const hasCallbackParams =
    searchParams.get("auth_provider") === CLOUD_AUTH_PROVIDER &&
    searchParams.has("code") &&
    searchParams.has("state")

  const callbackInitiated = useRef(false) // ref to prevent duplicate calls in React strict mode and other unmounting+mounting scenarios
  useEffect(() => {
    if (hasCallbackParams && !callbackInitiated.current) {
      callbackInitiated.current = true
      handleCallback()
    }
  }, [hasCallbackParams, handleCallback])

  const handleCloudLogin = async () => {
    try {
      const result = await sdk.auth.login("user", CLOUD_AUTH_PROVIDER, {
        // in case the admin is on a different domain, or the backend URL is set to just "/" which won't work for the callback
        callback_url: `${window.location.origin}${window.location.pathname}?auth_provider=${CLOUD_AUTH_PROVIDER}`,
      })

      if (typeof result === "object" && result.location) {
        // Redirect to Medusa Cloud for authentication
        window.location.href = result.location
        return
      }

      throw new Error("Unexpected login response")
    } catch {

Review comment (security):
nit(non-blocking): we use `searchParams.get("auth_provider") === CLOUD_AUTH_PROVIDER`, we could declare a variable for it

Code after:
import { Spinner } from "@medusajs/icons"
import { Button, toast } from "@medusajs/ui"
import { useCallback, useEffect, useRef, useState } from "react"
import { useTranslation } from "react-i18next"
import { decodeToken } from "react-jwt"
import { useNavigate, useSearchParams } from "react-router-dom"
import {
  useCloudAuthEnabled,
  useCreateCloudAuthUser,
} from "../../../hooks/api/cloud"
import { sdk } from "../../../lib/client"

const CLOUD_AUTH_PROVIDER = "cloud"

export const CloudAuthLogin = () => {
  const { t } = useTranslation()
  const [searchParams] = useSearchParams()
  const { data: cloudAuth } = useCloudAuthEnabled()

  const isAutoLogin =
    searchParams.get("auth_provider") === CLOUD_AUTH_PROVIDER &&
    searchParams.get("auto") === "true"

  const isCallback =
    searchParams.get("auth_provider") === CLOUD_AUTH_PROVIDER &&
    (searchParams.has("code") || searchParams.has("error"))

  const { handleLogin, isLoginPending } = useHandleLogin(isAutoLogin)
  const { handleCallback, isCallbackPending } = useAuthCallback(searchParams)

  const actionInitiated = useRef(false) // ref to prevent duplicate calls in React strict mode and other unmounting+mounting scenarios
  useEffect(() => {
    if (actionInitiated.current) {
      return
    }

    if (isAutoLogin) {
      actionInitiated.current = true
      handleLogin()
    } else if (isCallback) {
      actionInitiated.current = true
      handleCallback()
    }
  }, [isAutoLogin, isCallback, handleLogin, handleCallback])

  // Render full-screen overlay during auto-login or callback to hide the login form