feat: bypass local login (#373)

* adding option to bypass local login

* oops

* fix: add descriptive title

---------

Co-authored-by: Jayvin Hernandez <gogojayvin923@gmail.com>
Co-authored-by: dicedtomato <35403473+diced@users.noreply.github.com>

src/lib/config/Config.ts

@@ -123,6 +123,8 @@ export interface ConfigFeatures {
 }
 
 export interface ConfigOAuth {
+  bypass_local_login: boolean;
+
   github_client_id?: string;
   github_client_secret?: string;
 

src/lib/config/readConfig.ts

@@ -136,6 +136,8 @@ export default function readConfig() {
     map('DISCORD_SHORTEN_EMBED_THUMBNAIL', 'boolean', 'discord.shorten.embed.thumbnail'),
     map('DISCORD_SHORTEN_EMBED_TIMESTAMP', 'boolean', 'discord.shorten.embed.timestamp'),
 
+    map('OAUTH_BYPASS_LOCAL_LOGIN', 'boolean', 'oauth.bypass_local_login'),
+
     map('OAUTH_GITHUB_CLIENT_ID', 'string', 'oauth.github_client_id'),
     map('OAUTH_GITHUB_CLIENT_SECRET', 'string', 'oauth.github_client_secret'),
 

src/lib/config/validateConfig.ts

@@ -168,6 +168,8 @@ const validator = s.object({
     .nullish.default(null),
   oauth: s
     .object({
+      bypass_local_login: s.boolean.default(false),
+
       github_client_id: s.string.nullable.default(null),
       github_client_secret: s.string.nullable.default(null),
 

src/lib/middleware/getServerSideProps.ts

@@ -16,6 +16,7 @@ export type ServerSideProps = {
   user_registration: boolean;
   oauth_registration: boolean;
   oauth_providers: string;
+  bypass_local_login: boolean;
   chunks_size: number;
   max_size: number;
   totp_enabled: boolean;
@@ -60,6 +61,7 @@ export const getServerSideProps: GetServerSideProps<ServerSideProps> = async (ct
       user_registration: config.features.user_registration,
       oauth_registration: config.features.oauth_registration,
       oauth_providers: JSON.stringify(oauth_providers),
+      bypass_local_login: config.oauth.bypass_local_login,
       chunks_size: config.chunks.chunks_size,
       max_size: config.chunks.max_size,
       totp_enabled: config.mfa.totp_enabled,

src/pages/auth/login.tsx

@@ -22,7 +22,13 @@ import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 export { getServerSideProps } from 'middleware/getServerSideProps';
 
-export default function Login({ title, user_registration, oauth_registration, oauth_providers: unparsed }) {
+export default function Login({
+  title,
+  user_registration,
+  oauth_registration,
+  bypass_local_login,
+  oauth_providers: unparsed,
+}) {
   const router = useRouter();
 
   // totp modal
@@ -34,6 +40,9 @@ export default function Login({ title, user_registration, oauth_registration, oa
 
   const oauth_providers = JSON.parse(unparsed);
 
+  const show_local_login =
+    router.query.local === 'true' || !(bypass_local_login && oauth_providers?.length > 0);
+
   const icons = {
     GitHub: IconBrandGithub,
     Discord: IconBrandDiscordFilled,
@@ -99,6 +108,12 @@ export default function Login({ title, user_registration, oauth_registration, oa
 
   useEffect(() => {
     (async () => {
+      // if the user includes `local=true` as a query param, show the login form
+      // otherwise, redirect to the oauth login if there is only one registered provider
+      if (bypass_local_login && oauth_providers?.length === 1 && router.query.local !== 'true') {
+        await router.push(oauth_providers[0].url);
+      }
+
       const a = await fetch('/api/user');
       if (a.ok) await router.push('/dashboard');
     })();
@@ -152,7 +167,7 @@ export default function Login({ title, user_registration, oauth_registration, oa
       <Center sx={{ height: '100vh' }}>
         <Card radius='md'>
           <Title size={30} align='left'>
-            {title}
+            {bypass_local_login ? ' Login to Zipline with' : 'Zipline'}
           </Title>
 
           {oauth_registration && (
@@ -165,7 +180,7 @@ export default function Login({ title, user_registration, oauth_registration, oa
                     variant='outline'
                     radius='md'
                     fullWidth
-                    leftIcon={<Icon height={'15'} width={'15'} />}
+                    leftIcon={<Icon size='1rem' />}
                     my='xs'
                     component={Link}
                     href={url}
@@ -174,41 +189,42 @@ export default function Login({ title, user_registration, oauth_registration, oa
                   </Button>
                 ))}
               </Group>
-
-              <Divider my='xs' label='or' labelPosition='center' />
+              {show_local_login && <Divider my='xs' label='or' labelPosition='center' />}
             </>
           )}
 
-          <form onSubmit={form.onSubmit((v) => onSubmit(v))}>
-            <TextInput
-              my='xs'
-              radius='md'
-              size='md'
-              id='username'
-              label='Username'
-              {...form.getInputProps('username')}
-            />
-            <PasswordInput
-              my='xs'
-              radius='md'
-              size='md'
-              id='password'
-              label='Password'
-              {...form.getInputProps('password')}
-            />
+          {show_local_login && (
+            <form onSubmit={form.onSubmit((v) => onSubmit(v))}>
+              <TextInput
+                my='xs'
+                radius='md'
+                size='md'
+                id='username'
+                label='Username'
+                {...form.getInputProps('username')}
+              />
+              <PasswordInput
+                my='xs'
+                radius='md'
+                size='md'
+                id='password'
+                label='Password'
+                {...form.getInputProps('password')}
+              />
 
-            <Group position='apart'>
-              {user_registration && (
-                <Anchor size='xs' href='/auth/register' component={Link}>
-                  Don&apos;t have an account? Register
-                </Anchor>
-              )}
+              <Group position='apart'>
+                {user_registration && (
+                  <Anchor size='xs' href='/auth/register' component={Link}>
+                    Don&apos;t have an account? Register
+                  </Anchor>
+                )}
 
-              <Button size='sm' p='xs' radius='md' my='xs' type='submit' loading={loading}>
-                Login
-              </Button>
-            </Group>
-          </form>
+                <Button size='sm' p='xs' radius='md' my='xs' type='submit' loading={loading}>
+                  Login
+                </Button>
+              </Group>
+            </form>
+          )}
         </Card>
       </Center>
     </>