Error in app jsx while authenticate

Partner Discussions
1

Getting this error in app.jsx in remix app

Err :  Response {
19:53:13 │       remix │   status: 302,
19:53:13 │       remix │   statusText: '',
19:53:13 │       remix │   headers: Headers {
19:53:13 │       remix │     Location:
'https://admin.shopify.com/store/test-stiled2/apps/
[details="Summary"]
c824cffdc19f8bd48630f098e383130c
[/details]
'
19:53:13 │       remix │   },
19:53:13 │       remix │   body: null,
19:53:13 │       remix │   bodyUsed: false,
19:53:13 │       remix │   ok: false,
19:53:13 │       remix │   redirected: false,
19:53:13 │       remix │   type: 'default',
19:53:13 │       remix │   url: ''
19:53:13 │       remix │ }

here is the code

import { Link, Outlet, useLoaderData, useRouteError } from "@remix-run/react";
import { boundary } from "@shopify/shopify-app-remix/server";
import { AppProvider } from "@shopify/shopify-app-remix/react";
import { NavMenu } from "@shopify/app-bridge-react";
import polarisStyles from "@shopify/polaris/build/esm/styles.css?url";
import { authenticate } from "../shopify.server";

export const links = () => [{ rel: "stylesheet", href: polarisStyles }];

export const loader = async ({ request }) => {
  try {
    const { admin, session } = await authenticate.admin(request);

    return {
      apiKey: process.env.SHOPIFY_API_KEY || "",
    };
  } catch (error) {
    if (error instanceof Response) {
      console.log("Err : ", error);
      return error;
    }
    throw error;
  }
};

export default function App() {
  const { apiKey } = useLoaderData();

  return (
    <AppProvider isEmbeddedApp apiKey={apiKey}>
      <NavMenu>
        <Link to="/app" rel="home">
          Home
        </Link>
        <Link to="/app/additional">Additional page</Link>
      </NavMenu>
      <Outlet />
    </AppProvider>
  );
}

// Shopify needs Remix to catch some thrown responses, so that their headers are included in the response.
export function ErrorBoundary() {
  return boundary.error(useRouteError());
}

export const headers = (headersArgs) => {
  return boundary.headers(headersArgs);
};
2

What’s the context of the request? Are you trying to open the app through the Shopify Admin dashboard or some other way?

Are you sure your SHOPIFY_API_KEY is set?

3

@Dylan Yes, All the credentials are Set, i am previewing the app with the link which we get from

shopify app dev

› Press g │ open GraphiQL (Admin API) in your browser
› Press p │ preview in your browser
› Press q │ quit

Preview URL:
https://test-stiled2.myshopify.com/admin/oauth/redirect_from_cli?client_id=c824cffdc19f8bd48630f098e383130c
GraphiQL URL: http://localhost:3457/graphiql