Solved

Google Sign In in Front App


Badge +2

We Are trying to implement a Plugin using the Google Sign Button. The problem is however that the sign does not work because Google is trying to open a new window. That of course doesn't work in the plug-in within the Front app. 

 

Hence, my question is if anyone else has built such an integration and how did they manage to integrate Google sign in within the Front app plugin?

icon

Best answer by xdmnl 27 March 2024, 21:05

View original

12 replies

Userlevel 4
Badge +7

Hi @josula , Using the openUrlInPopup SDK method to open your new auth window should help resolve this issue. 

Let us know if you have questions!

Badge +2

Thanks this got the Login to work at least but how can I set cookies in the front app then for my auth? I am using next-auth with the google sign in… 

Right now I can signin in the popup but then in my plugin I am still not logged in. I guess its because it is not acually setting the auth cookies correctly

Userlevel 4
Badge +7

I put together a basic demo app using Next.js (though not next-auth) recently which sets cookies via Server Actions - https://github.com/dugjason/nextjs-front-plugin-with-cookie 

Importantly you should ensure you’re setting a partioned cookie to comply with upcoming browser privacy proposals (see this post for details), as well as setting samesite: ‘none’ and secure: true. 

It looks like next-auth allows for you to send custom instructions to be used when creating cookies (see next-auth docs). I believe sending something like the following in your next-auth config should work;

...

{
...
cookies: {
sameSite: 'none',
secure: true,
partitioned: true,
}
}

Looking forward to hearing how that goes 🤞

Badge +2

Thanks to me it is still not clear how it works with cookies across multiples domains.

I have this signin logic:

 

import { useFrontContext } from "@/providers/frontContext";
import { signIn, useSession } from "next-auth/react";
import { useRouter } from "next/router";

export default function Login() {
const { data, status } = useSession();

console.log("session", data, status);
const router = useRouter();
const context = useFrontContext();

const handleSignIn = () => {
if (context) {
context.openUrlInPopup(
"http://localhost:3000/api/auth/signin/google",
{}
);
} else {
signIn("google", { callbackUrl: "/offers" });
}
};
if (status === "authenticated") {
router.push("/youAreLoggedIn");
}

return (
<>
<button
onClick={() => handleSignIn()}
className="text-sm font-semibold leading-6"
>
Google
</button>
</>
);
}

Then when I click on the button it opens a new tab (when I am opening in the front app), and I get redirected to the API endpoint via this /api endpoint in nextjs:

 

import NextAuth, { AuthOptions } from "next-auth";
import GoogleProvider from "next-auth/providers/google";
export const authOptions: AuthOptions = {
providers: [
GoogleProvider({
clientId: process.env.GOOGLE_ID as string,
clientSecret: process.env.GOOGLE_SECRET as string,
}),
],
session: {
strategy: "jwt",
},
};

export default NextAuth(authOptions);

However then I can see that the next-auth tokens are set correctly in the localhost:3000 Cookie tab under the Applications in  Dev Tools but I cannot see them in my frontapp.com cookie tab and I do not know how this cross website auth could possbily work

 

 

Can anyone support here what I might be missing?

Badge +2

 Thanks to me it is still not clear how it works with cookies across multiples domains.

I have this signin logic:

import { useFrontContext } from "@/providers/frontContext";
import { signIn, useSession } from "next-auth/react";
import { useRouter } from "next/router";

export default function Login() {
const { data, status } = useSession();

console.log("session", data, status);
const router = useRouter();
const context = useFrontContext();

const handleSignIn = () => {
if (context) {
context.openUrlInPopup(
"http://localhost:3000/api/auth/signin/google",
{}
);
} else {
signIn("google", { callbackUrl: "/offers" });
}
};
if (status === "authenticated") {
router.push("/youAreLoggedIn");
}

return (
<>
<button
onClick={() => handleSignIn()}
className="text-sm font-semibold leading-6"
>
Google
</button>
</>
);
}

Then when I click on the button it opens a new tab (when I am opening in the front app), and I get redirected to the API endpoint via this /api endpoint in nextjs:

 

import NextAuth, { AuthOptions } from "next-auth";
import GoogleProvider from "next-auth/providers/google";
export const authOptions: AuthOptions = {
providers: [
GoogleProvider({
clientId: process.env.GOOGLE_ID as string,
clientSecret: process.env.GOOGLE_SECRET as string,
}),
],
session: {
strategy: "jwt",
},
};

export default NextAuth(authOptions);

However then I can see that the next-auth tokens are set correctly in the localhost:3000 Cookie tab under the Applications in  Dev Tools but I cannot see them in my frontapp.com cookie tab and I do not know how this cross website auth could possbily work

Can anyone support here what I might be missing?

Badge +2

I mean I cannot possibly be the first one to ever implement google auth in a front plugin?

Badge +2

Sorry my previous answer has not been accepted by the admins of this forum yet. My last post seems a bit out of context now

Userlevel 5
Badge +8

Sorry @josula the spam filters mistakenly flagged your replies. FYI @jason 

Badge +2

Does anyone have a clue? Basically I am looking for a working example of embedding an iframe including Google Auth ideally via next-auth in react.

I manage to open the auth in a new tab but then the cookies are not written correctly back to front so that my auth session claims I am not logged in...

Badge +2

So what works:

  1. I have a google sign in button in my iframe / plugin
  2. It opens a new tab in my front application where I signin
  3. I can see in my cookies that I do have my Cookies under `localhost:3000` - where my plugin is currently running - the cookies are set correctly.
  4. I can also see in the other Cookie tab of Front that my front_id etc are set coorectly.

  5. The problem is: When I come back to my plugin in front it shows me the “Sign in with google” button again, because it does not find the session because it is stored in the localhost cookie tab. 

I am not sure what to do here.

Userlevel 4
Badge +7

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 

@jason’s code sample works because of this specific line that sets partitioned cookies as recommended by our article on Replacing third-party cookies in Front plugins.
This is the recommended solution because it is completely transparent for the end-user.

Alternatively, your plugin can use the Storage Access API to ask the user permission to use third-party cookies.

Reply