Merge to main (#343)

* Fix for SSO and Keycloak redirects

* Fix for Keycloak

* Fix for redirect on logout

* Redirect bug

* redirect issue

* Redirect issue

* Redirect issue

* Redirect problem

* redirect

* Logging

* Back to implicit

* Remove implicit flow

* Another hack

* Again with NAVSA

* Keycloak fix

* Keycloak fix

* Keycloak fix

* Keycloak fix

* Keycloak fix

* remove logging

* Updated to bugfixed @recogito/text + pdf annotator versions

---------

Co-authored-by: Rainer Simon <[email protected]>
Co-authored-by: Rainer Simon <[email protected]>

package.json

@@ -41,9 +41,9 @@
     "@radix-ui/react-visually-hidden": "^1.1.0",
     "@react-spring/web": "^9.7.5",
     "@recogito/annotorious-supabase": "^1.1.0",
-    "@recogito/pdf-annotator": "1.0.0-rc.40",
-    "@recogito/react-pdf-annotator": "1.0.0-rc.40",
-    "@recogito/react-text-annotator": "3.0.0-rc.53",
+    "@recogito/pdf-annotator": "1.0.0-rc.41",
+    "@recogito/react-pdf-annotator": "1.0.0-rc.41",
+    "@recogito/react-text-annotator": "3.0.0-rc.54",
     "@supabase/ssr": "0.5.2",
     "@supabase/supabase-js": "2.46.1",
     "@table-library/react-table-library": "^4.1.7",

src/apps/auth-keycloak/AuthKeycloak.tsx

@@ -0,0 +1,44 @@
+import { useEffect } from 'react';
+import type { Translations } from 'src/Types';
+import { supabaseImplicit } from '@backend/supabaseBrowserClient';
+
+interface AuthKeycloakProps {
+  i18n: Translations;
+}
+export const AuthKeycloak = (props: AuthKeycloakProps) => {
+  const { t } = props.i18n;
+
+  const url = new URLSearchParams(window.location.search);
+  let redirectUrl = url.get('redirect-to');
+  if (redirectUrl) {
+    localStorage.setItem('redirect-to', redirectUrl);
+  } else {
+    redirectUrl = localStorage.getItem('redirect-to');
+    if (redirectUrl && redirectUrl.length === 0) {
+      redirectUrl = null;
+    }
+  }
+
+  useEffect(() => {
+    supabaseImplicit.auth
+      .signInWithOAuth({
+        provider: 'keycloak',
+        options: {
+          scopes: 'openid',
+          redirectTo: redirectUrl
+            ? redirectUrl
+            : `/${props.i18n.lang}/projects`,
+        },
+      })
+      .then(({ data, error }) => {
+        if (data?.url) {
+          localStorage.removeItem('redirect-to');
+          window.location.href = data.url;
+        } else {
+          console.error(error);
+        }
+      });
+  }, []);
+
+  return <div className='keycloak-main'>{t['Redirecting']}</div>;
+};

src/apps/auth-login/Login.tsx

@@ -28,7 +28,6 @@ const clearCookies = () => {
 
 export const Login = (props: {
   i18n: Translations;
-  logo: boolean;
   methods: LoginMethod[];
 }) => {
   const [isChecking, setIsChecking] = useState(true);
@@ -56,6 +55,7 @@ export const Login = (props: {
     supabase.auth.onAuthStateChange((event, session) => {
       if (event === 'SIGNED_OUT') {
         clearCookies();
+        redirectUrl = null;
       } else if (event === 'SIGNED_IN' || event === 'TOKEN_REFRESHED') {
         setCookies(session);
         if (redirectUrl) {
@@ -94,31 +94,15 @@ export const Login = (props: {
       })
       .then(({ data, error }) => {
         if (data?.url) {
-          localStorage.removeItem('redirect-to');
-          window.location.href = `${data.url}?next=${redirectUrl || '/'}`;
+          window.location.href = data.url;
         } else {
           console.error(error);
         }
       });
   };
 
   const signInWithKeycloak = () => {
-    supabase.auth
-      .signInWithOAuth({
-        provider: 'keycloak',
-        options: {
-          scopes: 'openid',
-          redirectTo: `${host}/auth/callback`,
-        },
-      })
-      .then(({ data, error }) => {
-        if (data?.url) {
-          localStorage.removeItem('redirect-to');
-          window.location.href = `${data.url}?next=${redirectUrl || '/'}`;
-        } else {
-          console.error(error);
-        }
-      });
+    window.location.href = `/${props.i18n.lang}/keycloak`;
   };
 
   const renderLoginButton = useCallback(

src/apps/auth-logout/Logout.tsx

@@ -1,5 +1,4 @@
-import { useEffect, useState } from 'react';
-import { SmileySad } from '@phosphor-icons/react';
+import { useEffect } from 'react';
 import { supabase } from '@backend/supabaseBrowserClient';
 import type { Translations } from 'src/Types';
 import { Spinner } from '@components/Spinner';
@@ -14,6 +13,21 @@ const clearCookies = () => {
 };
 
 export const Logout = (props: { i18n: Translations }) => {
+  localStorage.removeItem('redirect-to');
+  const arr = []; // Array to hold the keys
+  // Iterate over localStorage and find 'sb_
+  for (let i = 0; i < localStorage.length; i++) {
+    if (localStorage.key(i)?.substring(0, 3) == 'sb-') {
+      arr.push(localStorage.key(i));
+    }
+  }
+
+  // Iterate over arr and remove the items by key
+  for (let i = 0; i < arr.length; i++) {
+    if (arr[i]) {
+      localStorage.removeItem(arr[i] as string);
+    }
+  }
   useEffect(() => {
     supabase.auth.signOut().then(() => {
       clearCookies();

src/backend/supabaseBrowserClient.ts

@@ -1,4 +1,4 @@
-import { type SupabaseClient } from '@supabase/supabase-js';
+import { type SupabaseClient, createClient } from '@supabase/supabase-js';
 import { createBrowserClient } from '@supabase/ssr';
 
 const SUPABASE = import.meta.env.PUBLIC_SUPABASE;
@@ -10,3 +10,7 @@ const SUPABASE_API_KEY = import.meta.env.PUBLIC_SUPABASE_API_KEY;
 export const supabase: SupabaseClient =
   typeof window !== 'undefined' &&
   createBrowserClient(SUPABASE, SUPABASE_API_KEY);
+
+// @ts-ignore
+export const supabaseImplicit: SupabaseClient =
+  typeof window !== 'undefined' && createClient(SUPABASE, SUPABASE_API_KEY);

src/components/CheckRedirect/CheckRedirect.tsx

@@ -0,0 +1,14 @@
+import { useEffect } from 'react';
+
+export const CheckRedirect = () => {
+  useEffect(() => {
+    const redirectUrl = localStorage.getItem('redirect-to');
+
+    if (redirectUrl && redirectUrl.length > 0) {
+      localStorage.removeItem('redirect-to');
+      window.location.href = redirectUrl;
+    }
+  }, []);
+
+  return <div />;
+};

src/components/CheckRedirect/index.ts

@@ -0,0 +1 @@
+export * from './CheckRedirect';

src/pages/[lang]/index.astro

@@ -9,7 +9,7 @@ const lang = getLangFromUrl(Astro.url);
 
 const me = await getMyProfile(supabase);
 if (me.error || !me.data) {
-  return Astro.redirect(`/${lang}/sign-in?redirect-to=${Astro.url.pathname}`);
+  return Astro.redirect(`/${lang}/sign-in`);
 } else {
   return Astro.redirect(`/${lang}/projects/`);
 }

src/pages/[lang]/keycloak.astro

@@ -0,0 +1,12 @@
+---
+import { getTranslations } from '@i18n';
+import LoginLayout from '@layouts/login/LoginLayout.astro';
+import { AuthKeycloak } from '@apps/auth-keycloak/AuthKeycloak';
+---
+
+<LoginLayout title='' showLogo={true}>
+  <AuthKeycloak
+    client:only='react'
+    i18n={getTranslations(Astro.request, 'auth-login')}
+  />
+</LoginLayout>

src/pages/[lang]/projects/index.astro

@@ -5,6 +5,7 @@ import { getMyProfile, listMyInvites } from '@backend/crud';
 import { ProjectsHome } from '@apps/dashboard-projects';
 import { listMyProjectsExtended } from '@backend/helpers';
 import BaseLayout from '@layouts/BaseLayout.astro';
+import { CheckRedirect } from '@components/CheckRedirect';
 
 const lang = getLangFromUrl(Astro.url);
 
@@ -30,6 +31,7 @@ if (!projects.data || !invitations.data) {
 ---
 
 <BaseLayout title='Dashboard'>
+  <CheckRedirect client:only='react' />
   <ProjectsHome
     client:only='react'
     me={me.data}

src/pages/[lang]/sign-out.astro

@@ -7,10 +7,14 @@ import { createSupabaseServerClient } from '@backend/supabaseServerClient';
 const supabase = await createSupabaseServerClient(Astro.request, Astro.cookies);
 await supabase.auth.signOut();
 ---
-<BaseLayout title="Recogito | Logout">
-  <div class="container">
-    <div class="column">
-      <Logout i18n={getTranslations(Astro.request, 'error')} client:load />
+
+<BaseLayout title='Recogito | Logout'>
+  <div class='container'>
+    <div class='column'>
+      <Logout
+        i18n={getTranslations(Astro.request, 'error')}
+        client:only='react'
+      />
     </div>
   </div>
 </BaseLayout>
@@ -32,4 +36,4 @@ await supabase.auth.signOut();
     position: relative;
     width: 100%;
   }
-</style>
+</style>

src/pages/auth/callback.ts

@@ -6,8 +6,6 @@ export const GET: APIRoute = async ({ request, cookies, redirect, url }) => {
   const code = requestUrl.searchParams.get('code');
   const next = requestUrl.searchParams.get('next') || '/';
 
-  console.log('In callback, url = ', url, ', next = ', next);
-
   if (code) {
     const supabase = createServerClient(
       import.meta.env.PUBLIC_SUPABASE,

src/pages/index.astro

@@ -6,15 +6,16 @@ import parser from 'accept-language-parser';
 
 const accepts = Astro.request.headers.get('accept-language');
 
-const lang = accepts ? parser.pick(Object.keys(languages), accepts) : defaultLang;
+const lang = accepts
+  ? parser.pick(Object.keys(languages), accepts)
+  : defaultLang;
 
 const supabase = await createSupabaseServerClient(Astro.request, Astro.cookies);
 
 const me = await getMyProfile(supabase);
 if (me.error || !me.data) {
-  return Astro.redirect(`/${lang}/sign-in?redirect-to=${Astro.url.pathname}`);
+  return Astro.redirect(`/${lang}/sign-in`);
 } else {
   return Astro.redirect(`/${lang}/projects/`);
 }
 ---
-