Medusa React JS and Heroku Authentication Issues

[glad nymph]

Hello Folks,

I have spent the full day trying to figure this one out but unfortunately it hasnt worked.

I am running a custom version of the Admin which I ejected a while back. At the moment I am attempting to run the backend on Heroku which seems to have worked fine. I can see the logs of the backend on Heroku.

I am facing issues authenticating my self into the Medusa Backend with the Admin running locally. On LogIn the useAdminLogIn successfully sends a post request to the backend .

2023-09-07T21:44:27.314324+00:00 app[web.1]: 24.185.40.252 - - [07/Sep/2023:21:44:27 +0000] "POST /admin/auth HTTP/1.1" 200 309 "http://localhost:7001/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36"

On succesful login I receive the user object in LogInCard(https://github.com/medusajs/medusa/blob/develop/packages/admin-ui/ui/src/components/organisms/login-card/index.tsx#L19) which I console log.

The LogIn Card navigates to orders which is a protected page. This triggers the hook useAdminGetSession() in PrivateRoute pasted below. The useAdminGetSession() request is failing with Unauthorized Access 401. And the returned user object is undefined.

Any help will be appreciated!!! My initial hunch is that this is a cookie,token error.

const LoginCard = ({ toResetPassword }: LoginCardProps) => {
  const {
    register,
    handleSubmit,
    setError,
    formState: { errors },
  } = useForm<FormValues>()
  const navigate = useNavigate()
  const { mutate, isLoading } = useAdminLogin()

  const { getWidgets } = useWidgets()

  const onSubmit = (values: FormValues) => {
    mutate(values, {
      onSuccess: () => {
        navigate("/a/orders")
      },

```
Private Route 

```import { useAdminGetSession } from "medusa-react"
import { ReactNode, useEffect } from "react"
import { useNavigate } from "react-router-dom"
import Spinner from "../atoms/spinner"

type PrivateRouteProps = {
  children: ReactNode
}

const PrivateRoute = ({ children }: PrivateRouteProps) => {
  const { user, isLoading } = useAdminGetSession()
  const navigate = useNavigate()

  useEffect(() => {
    if (!user && !isLoading) {
      navigate("/login")
    }
  }, [user, isLoading, navigate])

  if (user && !isLoading) {
    return <>{children}</>
  }

  return (
    <div className="flex h-screen w-full items-center justify-center">
      <Spinner variant="secondary" />
    </div>
  )
}

export default PrivateRoute
```

[rapid root]

One considerdation is that Safari will not send a cookie across domains. It will send across subdomains, though. Are your admin, backend, and storefront all on the same domain?

[glad nymph]

I am running my front end on local host and the backend on GCP now. Is this cross domain?

export default function medusaRequest(method, path = "", payload = {}) {
  const options = {
    method,
    withCredentials: true,
    url: path,
    data: payload,
    json: true,
    crossDomain: true,
  }
  return client(options)
}

This is how I am sending my request

And this is the cors

 const adminCors = {
    origin: config.projectConfig.admin_cors.split(","),
    methods: ['*'],
    allowedHeaders: ['Content-Type', 'Authorization', '*'], // Add allowed headers
    credentials: true,
  }