Have your say in Community Polls: What was/is your greatest motivation to start your own business?
Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

Next.js + Auth.js V5 - Private App - Login 400 Error

Next.js + Auth.js V5 - Private App - Login 400 Error

LuckyFist
Shopify Partner
2 0 0

I've created a private app using the Admin dashboard. The app uses Next.js and Auth.js V5 to handle customer login.

I've created a custom provider object in my Auth.js configuration that looks like this:

 

 

import NextAuth from 'next-auth';

const shopDomain = process.env.SHOPIFY_STORE_DOMAIN;
const shopId = process.env.SHOPIFY_SHOP_ID;
const shopScopes = process.env.SHOPIFY_API_SCOPES;
const appDomain = process.env.NEXT_AUTH_URL;

export const { handlers, signIn, signOut, auth } = NextAuth({
  providers: [{
    id: "shopify",
    name: "Shopify",
    type: "oauth",
    version: "2.0",
    scope: shopScopes,
    params: { grant_type: "authorization_code" },
    issuer: `https://${shopDomain}/admin/oauth/authorize`,
    authorization: {
      url: `https://${shopDomain}/admin/oauth/authorize`,
      params: {
        client_id: process.env.SHOPIFY_API_PUBLIC_KEY,
        scope: shopScopes,
        redirect_uri: `https://${appDomain}/api/auth/callback/shopify`,
      },
    },
    async profile(profile, tokens) {
      return {
        id: profile.shop.id.toString(),
        name: profile.shop.name,
        email: profile.shop.email,
        image: null // Shopify doesn't return an image URL in the shop JSON
      };
    },
    clientId: process.env.SHOPIFY_API_PUBLIC_KEY,
    clientSecret: process.env.SHOPIFY_API_SECRET_KEY
  }]
})

 

 

 

When in development, I am able to get as far as the Shopify login screen that shows my existing Shopify accounts. However, when I click one of these login options, I see the following Shopify error screen:

Screenshot 2024-08-15 211522.png

 

The error message reads: 

 

 

Oauth error invalid_request: The redirect_uri and application url must have matching hosts

 

 

 

As far as I can tell, this error happens because the URL my application is sending the request from is not whitelisted or otherwise configured in my Shopify store. However, there doesn't seem to be anywhere in the Admin dashboard that allows developers to configure allowed redirect URLs. 

If anyone else knows how to add redirect URLs or has a better approach to handling user authentication with custom apps like this, please share! I've tried a lot of different approaches but keep running into similar errors.

Replies 0 (0)