Production login vs dev - production not working

[MonopolisticInvestor]

hello guys!
Intermediate programmer here! I’m making an app with auth0 login. Unfortunately, after I made the mode of it to production mode, I can’t seem to login, even though I enter the correct details of my Google account. There is no red indicator in the browser in the upper left corner, as I deleted all social connections, except for the Google one. I also tried logging in with my email, and it loads for an infinite amount of time. When I try Google, I click sign in, and it loads forever as well. I have created a Google cloud project, so everything is fine there, so I have no idea what is wrong. What to do? All my callbacks and cross-roigins are correct, as in dev mode, it works.

Thanks,
Antoni

[dawid.matuszczyk]

Hi @MonopolisticInvestor

Welcome to the Auth0 Community!

I’ve checked the tenant associated with your community account, and I couldn’t find any error apart from missing the response_type, which you can find the details to fix here → "Missing required parameter: response_type" Login Error

Thanks
Dawid

[MonopolisticInvestor]

Sorry, but this doesn’t help me at all. I have no idea how to implement the missing response parameter. I followed every guide that is on this website on how to properly set it up. Everything works perfectly on my localhost, BUT not on my vps. I still get the same error for CORS, and I don’t understand why that is the case.

[MonopolisticInvestor]

Here is the exact link that I’m reffering to: (response_type is clearly visible):
https://dev-yosp6gxnevw1owhs.us.auth0.com/authorize?client_id=Ylr0Icx2wzlWJnWgj3HGGAqTJv1Gey3A&scope=openid%20profile%20email&response_type=code&redirect_uri=https%3A%2F%2Fmarket-share-chart.sketchthread.com%2Fapi%2Fauth%2Fcallback&nonce=aozJElkrVaF3kGY5tBbX18Q4brB-dHZw6n8pOuHV7Nc&state=eyJyZXR1cm5UbyI6Imh0dHBzOi8vbWFya2V0LXNoYXJlLWNoYXJ0LnNrZXRjaHRocmVhZC5jb20ifQ&code_challenge_method=S256&code_challenge=3IxzdahnwGsffqHt44xtP4gVgIobrzMWmC2ntUP3paI

[dawid.matuszczyk]

Hi @MonopolisticInvestor

Thank you for the feedback. Can you share more insight into which SDK you are using and how you are making a call to the /authorize? I’m also sharing a few additional resources that may resolve the issue:

• Next JS CORS Error on /authorize Endpoint
• Cross-Origin Authentication
• CORS error when initiating silent auth requests

Thanks
Dawid

[MonopolisticInvestor]

I use the route.js in my api/auth/[auth0] in the file route.js: GNU nano 7.2 route.js

import { handleAuth } from 
'@auth0/nextjs-auth0';

export const GET = handleAuth();

I the have a base page (you can see it on the first screen):

This will then redirect you to the dashboard/page.tsx, which will try to login you or not:

'use client';

import { useUser } from '@auth0/nextjs-auth0/client';
//import { getSession } from '@auth0/nextjs-auth0';
import Stripe from 'stripe';
import React, { useState, useEffect } from "react"; // Import useState and useEffect
import { redirect } from 'next/navigation';
import Link from 'next/link';

export default function Page() {
    const { user, error, isLoading } = useUser();
    const [isPaidUser, setIsPaidUser] = useState(false);

    useEffect(() => {
      async function fetchSubscriptionStatus() {
        const response = await fetch("/api/update-subscription-status");
        const data = await response.json();
        setIsPaidUser(data.isPaidUser);
      }
      
      fetchSubscriptionStatus();
    }, []);

    if (!user) {
        redirect("/api/auth/login");
        return null; // Important: Add a return statement to prevent further execution
    }

    if (isLoading) {
      return <div>Loading...</div>; // Display a loading message while user is loading
    }

    if (error) {
      return <div>Error: {error.message}</div>; // Display error message if any
    }

    return (
        <>
            <h1>Dashboard</h1>
            <h2>Hello {user.name}!</h2>
            {isPaidUser ? (
                <Link href={"/dashboard/marketShare"} className="bg-indigo-500 text-white text-xs font-bold px-3 py-1 rounded outline-none">
                    Market Share Chart
                </Link>
            ) : (
                <p>You need a premium subscription to access the Market Share Chart.</p>
            )}
        </>
    );
}

Here’s the project structure:

Now that I read it, it may be possible that the link element is interfering, but honestly I have no idea, as it works fine on localhost. Any ideas?

[dawid.matuszczyk]

Hi @MonopolisticInvestor

Thank you for sharing your insight. Based on the previous topics and the note in the Nextjs Auth0 SDK the issue may be with the <Link> component. Can you try to change it to the <a> tag?

GitHub - auth0/nextjs-auth0: Next.js SDK for signing in with Auth0.

Thanks
Dawid

[MonopolisticInvestor]

This is the current state of my app:
page.tsx:

import Link from "next/link";
import Image from "next/image";

export default function Home() {
  return (
    <div className="flex justify-center items-center flex-col h-screen w-screen gap-5">
      <Image src="./marketShareAppIcon.svg" alt="market share app icon" width={120} height={120}></Image>
      <h1>MarketShare</h1>
      <h2>By Monopolistic Investor</h2>
      <a href="/api/auth/login">Login</a>
      <h2>None of the content in this app should be considered financial advice. For informational purposes only!</h2>
    </div>
  );
}

The layout.tsx (commented UserProvider component - doesn’t make any errors):

import type { Metadata } from "next";
import "./globals.css";
import { UserProvider } from '@auth0/nextjs-auth0/client';

export const metadata: Metadata = {
  title: "MarketShare",
  description: "A simple app by Monopolistic Investor",
};

export default function RootLayout(props: { children: React.ReactNode }) {
  const { children } = props;

  return (
    <UserProvider>
    <html lang="en">
    {/* <UserProvider> */}
      <body>
        {children}
        </body>
      {/* </UserProvider> */}
    </html>
    </UserProvider>
  );
}

[MonopolisticInvestor]

And it’s till not working.

[dawid.matuszczyk]

Hi there!

Update regarding the issue, we couldn’t identify the issue that could be causing this issue. If you are using Next.js with Auth0 please make sure to use the latest SDK version, use <a>tag instead of <Link> component and follow our quickstart → Auth0 Next.js SDK Quickstarts: Add Login to your Next.js application

Thanks!
Dawid