Fixes show login form's provider

Author: MaximeBro

src/app/auth/LoginForm.tsx

@@ -1,38 +1,75 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 
 import { Box, Button, Stack, Text } from '@chakra-ui/react';
 import { signIn } from 'next-auth/react';
 import { useTranslation } from 'react-i18next';
-import { FiGithub, FiInfo } from 'react-icons/fi';
+import { FiGithub, FiGitlab, FiInfo } from 'react-icons/fi';
 
 import { Icon } from '@/components';
 
-export const LoginForm = ({ onSuccess = () => undefined, ...rest }: TODO) => {
+export const LoginForm = ({
+  onSuccess = () => undefined,
+  provider,
+  ...rest
+}: TODO) => {
   const { t } = useTranslation();
+  useEffect(() => {
+    if (provider === undefined) {
+      provider = 'github';
+    }
+  }, []);
 
   return (
-    <Stack {...rest}>
-      <Button
-        w="full"
-        colorScheme="github"
-        bg="github.800"
-        color="white"
-        leftIcon={<FiGithub />}
-        ms="auto"
-        onClick={() => signIn('github')}
-      >
-        {t('auth:login.actions.github.login')}
-      </Button>
-      <Box borderRadius="md" bg="github.100" color="github.800" p="4">
-        <Text>
-          <Icon icon={FiInfo} /> Only users from{' '}
-          <Text as="span" fontWeight="medium">
-            {process.env.NEXT_PUBLIC_GITHUB_ALLOWED_ORGANIZATIONS}
-          </Text>{' '}
-          GitHub organisation(s) will be able to use the application once logged
-          in.
-        </Text>
-      </Box>
-    </Stack>
+    <>
+      {provider === 'github' ? (
+        <Stack {...rest}>
+          <Button
+            w="full"
+            colorScheme="github"
+            bg="github.800"
+            color="white"
+            leftIcon={<FiGithub />}
+            ms="auto"
+            onClick={() => signIn('github')}
+          >
+            {t('auth:login.actions.github.login')}
+          </Button>
+          <Box borderRadius="md" bg="github.100" color="github.800" p="4">
+            <Text>
+              <Icon icon={FiInfo} /> Only users from{' '}
+              <Text as="span" fontWeight="medium">
+                {process.env.NEXT_PUBLIC_GITHUB_ALLOWED_ORGANIZATIONS}
+              </Text>{' '}
+              GitHub organisation(s) will be able to use the application once
+              logged in.
+            </Text>
+          </Box>
+        </Stack>
+      ) : (
+        <Stack>
+          <Button
+            w="full"
+            colorScheme="gitlab"
+            bg="github.800"
+            color="white"
+            leftIcon={<FiGitlab />}
+            ms="auto"
+            onClick={() => signIn('gitlab')}
+          >
+            {t('auth:login.actions.gitlab.login')}
+          </Button>
+          <Box borderRadius="md" bg="github.100" color="github.800" p="4">
+            <Text>
+              <Icon icon={FiInfo} /> Only users from{' '}
+              <Text as="span" fontWeight="medium">
+                {process.env.NEXT_PUBLIC_GITHUB_ALLOWED_ORGANIZATIONS}
+              </Text>{' '}
+              GitLab organisation(s) will be able to use the application once
+              logged in.
+            </Text>
+          </Box>
+        </Stack>
+      )}
+    </>
   );
 };

src/app/auth/LoginModalInterceptor.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 
 import {
   Heading,
@@ -28,6 +28,8 @@ export const LoginModalInterceptor = () => {
   const pathnameRef = useRef(pathname);
   pathnameRef.current = pathname;
 
+  const [provider, setProvider] = useState<string>('github');
+
   useEffect(() => {
     const interceptor = Axios.interceptors.response.use(
       (r) => r,
@@ -36,6 +38,10 @@ export const LoginModalInterceptor = () => {
           error?.response?.status === 401 &&
           pathnameRef.current !== '/login'
         ) {
+          if (error.response.data && error.response.data.provider) {
+            setProvider(error.response.data.provider);
+          }
+
           queryCache.cancelQueries();
           onOpen();
         }
@@ -76,7 +82,7 @@ export const LoginModalInterceptor = () => {
         <ModalBody p="6">
           <Heading size="lg">{t('auth:interceptor.title')}</Heading>
           <Text mb="2">{t('auth:interceptor.description')}</Text>
-          <LoginForm onSuccess={handleLogin} />
+          <LoginForm onSuccess={handleLogin} provider={provider} />
         </ModalBody>
       </ModalContent>
     </Modal>

src/utils/api.ts

@@ -18,7 +18,11 @@ export const badRequest = (res: NextApiResponse) => {
   return res.status(400).end();
 };
 
-export const notSignedIn = (res: NextApiResponse) => {
+export const notSignedIn = (res: NextApiResponse, url?: string) => {
+  if (url && (url as string).endsWith('api/csv/issue')) {
+    return res.status(401).json({ provider: 'gitlab' });
+  }
+
   return res.status(401).end();
 };
 
@@ -50,10 +54,10 @@ export const apiMethods =
     if (!method.isPublic) {
       // getSession is now deprecated and is way slower than getServerSession because
       // it does an extra fetch out over the internet to confirm data from itself
-      const session = await getServerSession(req, res, authOptions);
 
+      const session = await getServerSession(req, res, authOptions);
       if (!session) {
-        return notSignedIn(res);
+        return notSignedIn(res, req.url);
       }
     }