Google Sign In in Front App

Hi @josula , I’ll admin I’m not 100% sure why this works, and it’s not pretty, but I’ve put together a sample repo that does work; https://github.com/dugjason/nextauth4-front-plugin 

I have been trying for weeks now: I manage to implement the tool so I can use it in front via iFrame and google Auth but now I cannot use it in a regular browser anymore because the cookies are not set securely via the popup window to the parent. I have spent countless hours trying to fix this. It is incredibly frustrating and delaying our deployment since weeks now….

In Chrome my App only runs if the next-auth.session-key is set with a “__Secure-….” in front of it. If I do this however, then my Front App wont pass my auth anymore because it expects it differently.

So either one works (Front Integration) or my Browser….

Below my authOptions:

import { NextAuthOptions } from "next-auth";
import GoogleProvider from "next-auth/providers/google";

const cookieOptions = {
  httpOnly: true,
  partitioned: true,
  sameSite: "none" as "none",
  secure: true,
  path: "/",
};

export const authOptions: NextAuthOptions = {
  secret: process.env.NEXTAUTH_SECRET,

  // Configure one or more authentication providers
  providers: [
    GoogleProvider({
      clientId: process.env.AUTH_GOOGLE_ID as string,
      clientSecret: process.env.AUTH_GOOGLE_SECRET as string,
    }),
  ],

  // Update cookie options to be secure and sameSite: 'none' and partioned
  cookies: {
    sessionToken: {
      name: `next-auth.session-token`,
      options: cookieOptions,
    },
    callbackUrl: {
      name: `next-auth-callback-url`,
      options: cookieOptions,
    },
    csrfToken: {
      name: `next-auth.csrf-token`,
      options: cookieOptions,
    },
    pkceCodeVerifier: {
      name: `next-auth.pkce.code_verifier`,
      options: cookieOptions,
    },
  },
};

Then my middleware:

import { authOptions } from "@/lib/auth/auth-options";
import withAuth from "next-auth/middleware";

export default withAuth({
  jwt: { decode: authOptions.jwt?.decode },
  callbacks: {
    authorized: ({ token }) => !!token,
  },
  pages: {
    signIn: "/signin",
    error: "/error",
  },
});

export const config = { matcher: ["/", "/offers", "/offer/:path"] };

And my API route in Next JS:

import NextAuth from "next-auth";

import { authOptions } from "@/lib/auth/auth-options";

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST };

This issue is incredibly time consuming on our end. I do not really understand how Front does not have this (Provider OAuth) out of the box? Our internal stakeholders are waiting since weeks for this feature and we simply cannot release it because of this auth topic

Hi @josula , can you help me understand what you’re experiencing when you keep the __Secure prefix on the cookie names in Front? I’m having trouble replicating what you’re reporting. 

I’ll re-share that repo and a hosted example where it works both in-browser and in Front:

• https://nextauth4-front-plugin.vercel.app (enter this as your plugin app base URL)
• https://github.com/dugjason/nextauth4-front-plugin 

I’m seeing it logs in successfully, and will allow you to access a /secure page only when logged in. 

Something to note about Front plugins is that they are best built as a single-page app, and use states (rather than pages/paths) to alter that’s being shown to the user. Given that Front plugins are typically designed with a “mobile-first” layout given the small max-width, we often find developers will add a separate page to their app for the Front plugin, and render components as needed in the smaller viewport. 

Thanks for sharing this. I seriously copied everything 1:1. When I click on “Sign In” in my app it redirects me immediately to /api/auth/signin?csrf=true and just shows me the sign in with google button - on click on the button nothing happens at all… 

I seriously checked each file 100 times and just copied them from your repo… 😅

But I do agree: Your example works fine. Could it be that my Google Auth is wrongly configured?! But I cant really believe this, it worked fine before

So when initiating a sign-in in my version, we use an onclick handler (see code) to open a new window containing this page where the user clicks to start the auth process (but the plugin page remains unchanged). 

I think what might be happening for you is that the user is being redirected to the login auth page inside the iframe. They then click sign in, the OAuth popup window opens and they start the auth flow, but it can’t update the page rendered in the iframe, so you get stuck at this point. 

I hope that helps unblock you! 🤞

Thanks I copied all of that over, I replaced all successive components with your code: I end up at the weird Google Sign In button that does nothing… I will have to take yet another look tomorrow morning, I think it might also be some .env or Google Config stuff. But I doubt it since this already worked before

I just cloned and replicated your repo and it works fine on my machine. there is some difference somewhere I will try to find tomorrow. Thanks again for all the support

Just sharing a screenshot from my Google OAuth console to show how I configured the origin/redirect URL for the hosted app;

Thanks for sharing! Funny enough, if I clone the current repo, add my .env file and Click on SIgn In in Chrome I get the same issue as I do currently. I even removed and cloned your repo again. This is incredibly weird. It is in Chrome and Brave though