Fix allow invited users to signin/signup with Github (#534)

* pass inviteToken through github / google redirect url

* keep invite token when switching between signup and login

apps/web/components/auth/GithubButton.tsx

@@ -4,11 +4,17 @@ import { Button } from "@formbricks/ui";
 import { signIn } from "next-auth/react";
 import { FaGithub } from "react-icons/fa";
 
-export const GithubButton = ({ text = "Continue with Github" }) => {
+export const GithubButton = ({
+  text = "Continue with Github",
+  inviteUrl,
+}: {
+  text?: string;
+  inviteUrl?: string | null;
+}) => {
   const handleLogin = async () => {
     await signIn("github", {
       redirect: true,
-      callbackUrl: "/", // redirect after login to /
+      callbackUrl: inviteUrl ? inviteUrl : "/", // redirect after login to /
     });
   };
 

apps/web/components/auth/GoogleButton.tsx

@@ -4,11 +4,17 @@ import { Button } from "@formbricks/ui";
 import { signIn } from "next-auth/react";
 import { FaGoogle } from "react-icons/fa";
 
-export const GoogleButton = ({ text = "Continue with Google" }) => {
+export const GoogleButton = ({
+  text = "Continue with Google",
+  inviteUrl,
+}: {
+  text?: string;
+  inviteUrl?: string | null;
+}) => {
   const handleLogin = async () => {
     await signIn("google", {
       redirect: true,
-      callbackUrl: "/", // redirect after login to /
+      callbackUrl: inviteUrl ? inviteUrl : "/", // redirect after login to /
     });
   };
 

apps/web/components/auth/SigninForm.tsx

@@ -30,6 +30,9 @@ export const SigninForm = () => {
   const [isPasswordFocused, setIsPasswordFocused] = useState(false);
   const formRef = useRef<HTMLFormElement>(null);
 
+  const callbackUrl = searchParams?.get("callbackUrl");
+  const inviteToken = callbackUrl ? new URL(callbackUrl).searchParams.get("token") : null;
+
   const checkFormValidity = () => {
     // If both fields are filled, enable the button
     if (formRef.current) {
@@ -108,12 +111,12 @@ export const SigninForm = () => {
 
           {env.NEXT_PUBLIC_GOOGLE_AUTH_ENABLED === "1" && (
             <>
-              <GoogleButton />
+              <GoogleButton inviteUrl={callbackUrl} />
             </>
           )}
           {env.NEXT_PUBLIC_GITHUB_AUTH_ENABLED === "1" && (
             <>
-              <GithubButton />
+              <GithubButton inviteUrl={callbackUrl} />
             </>
           )}
         </div>
@@ -121,7 +124,9 @@ export const SigninForm = () => {
           <div className="mt-9 text-center text-xs ">
             <span className="leading-5 text-slate-500">New to Formbricks?</span>
             <br />
-            <Link href="/auth/signup" className="font-semibold text-slate-600 underline hover:text-slate-700">
+            <Link
+              href={callbackUrl ? `/auth/signup?inviteToken=${inviteToken}` : "/auth/signup"}
+              className="font-semibold text-slate-600 underline hover:text-slate-700">
               Create an account
             </Link>
           </div>

apps/web/components/auth/SignupForm.tsx

@@ -18,6 +18,9 @@ export const SignupForm = () => {
   const [signingUp, setSigningUp] = useState(false);
   const nameRef = useRef<HTMLInputElement>(null);
 
+  const inviteToken = searchParams?.get("inviteToken");
+  const callbackUrl = env.NEXT_PUBLIC_WEBAPP_URL + "/invite?token=" + inviteToken;
+
   const handleSubmit = async (e: any) => {
     e.preventDefault();
 
@@ -30,7 +33,7 @@ export const SignupForm = () => {
         e.target.elements.name.value,
         e.target.elements.email.value,
         e.target.elements.password.value,
-        searchParams?.get("inviteToken")
+        inviteToken
       );
       const url =
         env.NEXT_PUBLIC_EMAIL_VERIFICATION_DISABLED === "1"
@@ -165,12 +168,12 @@ export const SignupForm = () => {
 
           {env.NEXT_PUBLIC_GOOGLE_AUTH_ENABLED === "1" && (
             <>
-              <GoogleButton />
+              <GoogleButton inviteUrl={callbackUrl} />
             </>
           )}
           {env.NEXT_PUBLIC_GITHUB_AUTH_ENABLED === "1" && (
             <>
-              <GithubButton />{" "}
+              <GithubButton inviteUrl={callbackUrl} />
             </>
           )}
         </div>
@@ -207,7 +210,9 @@ export const SignupForm = () => {
         <div className="mt-9 text-center text-xs ">
           <span className="leading-5 text-slate-500">Have an account?</span>
           <br />
-          <Link href="/auth/login" className="font-semibold text-slate-600 underline hover:text-slate-700">
+          <Link
+            href={inviteToken ? `/auth/login?callbackUrl=${callbackUrl}` : "/auth/login"}
+            className="font-semibold text-slate-600 underline hover:text-slate-700">
             Log in.
           </Link>
         </div>

pnpm-lock.yaml

@@ -1,9 +1,5 @@
 lockfileVersion: '6.0'
 
-settings:
-  autoInstallPeers: true
-  excludeLinksFromLockfile: false
-
 importers:
 
   .:
@@ -20781,3 +20777,7 @@ packages:
   /zwitch@2.0.4:
     resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
     dev: false
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false