Feat/navigate to signup if email does not exist (#540)

* Add userExists route

* Fix demo mode for login

* Improve sign in/up flow

* Remove redundant password length constraint

* Fix test

front/src/generated/graphql.tsx

@@ -2286,6 +2286,7 @@ export type PipelineWhereUniqueInput = {
 
 export type Query = {
   __typename?: 'Query';
+  checkUserExists: UserExists;
   clientConfig: ClientConfig;
   currentUser: User;
   currentWorkspace: Workspace;
@@ -2299,6 +2300,11 @@ export type Query = {
 };
 
 
+export type QueryCheckUserExistsArgs = {
+  email: Scalars['String'];
+};
+
+
 export type QueryFindManyCommentThreadsArgs = {
   cursor?: InputMaybe<CommentThreadWhereUniqueInput>;
   distinct?: InputMaybe<Array<CommentThreadScalarFieldEnum>>;
@@ -2498,6 +2504,11 @@ export type UserCreateWithoutWorkspaceMemberInput = {
   updatedAt?: InputMaybe<Scalars['DateTime']>;
 };
 
+export type UserExists = {
+  __typename?: 'UserExists';
+  exists: Scalars['Boolean'];
+};
+
 export type UserOrderByWithRelationInput = {
   avatarUrl?: InputMaybe<SortOrder>;
   comments?: InputMaybe<CommentOrderByRelationAggregateInput>;
@@ -2789,6 +2800,13 @@ export type CreateEventMutationVariables = Exact<{
 
 export type CreateEventMutation = { __typename?: 'Mutation', createEvent: { __typename?: 'Analytics', success: boolean } };
 
+export type CheckUserExistsQueryVariables = Exact<{
+  email: Scalars['String'];
+}>;
+
+
+export type CheckUserExistsQuery = { __typename?: 'Query', checkUserExists: { __typename?: 'UserExists', exists: boolean } };
+
 export type ChallengeMutationVariables = Exact<{
   email: Scalars['String'];
   password: Scalars['String'];
@@ -3116,6 +3134,41 @@ export function useCreateEventMutation(baseOptions?: Apollo.MutationHookOptions<
 export type CreateEventMutationHookResult = ReturnType<typeof useCreateEventMutation>;
 export type CreateEventMutationResult = Apollo.MutationResult<CreateEventMutation>;
 export type CreateEventMutationOptions = Apollo.BaseMutationOptions<CreateEventMutation, CreateEventMutationVariables>;
+export const CheckUserExistsDocument = gql`
+    query CheckUserExists($email: String!) {
+  checkUserExists(email: $email) {
+    exists
+  }
+}
+    `;
+
+/**
+ * __useCheckUserExistsQuery__
+ *
+ * To run a query within a React component, call `useCheckUserExistsQuery` and pass it any options that fit your needs.
+ * When your component renders, `useCheckUserExistsQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useCheckUserExistsQuery({
+ *   variables: {
+ *      email: // value for 'email'
+ *   },
+ * });
+ */
+export function useCheckUserExistsQuery(baseOptions: Apollo.QueryHookOptions<CheckUserExistsQuery, CheckUserExistsQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<CheckUserExistsQuery, CheckUserExistsQueryVariables>(CheckUserExistsDocument, options);
+      }
+export function useCheckUserExistsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<CheckUserExistsQuery, CheckUserExistsQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<CheckUserExistsQuery, CheckUserExistsQueryVariables>(CheckUserExistsDocument, options);
+        }
+export type CheckUserExistsQueryHookResult = ReturnType<typeof useCheckUserExistsQuery>;
+export type CheckUserExistsLazyQueryHookResult = ReturnType<typeof useCheckUserExistsLazyQuery>;
+export type CheckUserExistsQueryResult = Apollo.QueryResult<CheckUserExistsQuery, CheckUserExistsQueryVariables>;
 export const ChallengeDocument = gql`
     mutation Challenge($email: String!, $password: String!) {
   challenge(email: $email, password: $password) {

front/src/modules/auth/services/index.ts

@@ -1 +1,2 @@
+export * from './select';
 export * from './update';

front/src/modules/auth/services/select.ts

@@ -0,0 +1,9 @@
+import { gql } from '@apollo/client';
+
+export const CHECK_USER_EXISTS = gql`
+  query CheckUserExists($email: String!) {
+    checkUserExists(email: $email) {
+      exists
+    }
+  }
+`;

front/src/pages/auth/Index.tsx

@@ -12,6 +12,7 @@ import { Title } from '@/auth/components/ui/Title';
 import { authFlowUserEmailState } from '@/auth/states/authFlowUserEmailState';
 import { isMockModeState } from '@/auth/states/isMockModeState';
 import { authProvidersState } from '@/client-config/states/authProvidersState';
+import { isDemoModeState } from '@/client-config/states/isDemoModeState';
 import { useScopedHotkeys } from '@/hotkeys/hooks/useScopedHotkeys';
 import { InternalHotkeysScope } from '@/hotkeys/types/internal/InternalHotkeysScope';
 import { MainButton } from '@/ui/components/buttons/MainButton';
@@ -35,7 +36,7 @@ export function Index() {
   const theme = useTheme();
   const [, setMockMode] = useRecoilState(isMockModeState);
   const [authProviders] = useRecoilState(authProvidersState);
-  const [demoMode] = useRecoilState(authProvidersState);
+  const [demoMode] = useRecoilState(isDemoModeState);
 
   const [authFlowUserEmail, setAuthFlowUserEmail] = useRecoilState(
     authFlowUserEmailState,

front/src/pages/auth/PasswordLogin.tsx

@@ -16,6 +16,7 @@ import { InternalHotkeysScope } from '@/hotkeys/types/internal/InternalHotkeysSc
 import { MainButton } from '@/ui/components/buttons/MainButton';
 import { TextInput } from '@/ui/components/inputs/TextInput';
 import { SubSectionTitle } from '@/ui/components/section-titles/SubSectionTitle';
+import { useCheckUserExistsQuery } from '~/generated/graphql';
 
 const StyledContentContainer = styled.div`
   width: 100%;
@@ -84,11 +85,20 @@ export function PasswordLogin() {
     [handleLogin],
   );
 
+  const { loading, data } = useCheckUserExistsQuery({
+    variables: {
+      email: authFlowUserEmail,
+    },
+  });
+
   return (
     <>
       <Logo />
       <Title>Welcome to Twenty</Title>
-      <SubTitle>Enter your credentials to sign in</SubTitle>
+      <SubTitle>
+        Enter your credentials to sign{' '}
+        {data?.checkUserExists.exists ? 'in' : 'up'}
+      </SubTitle>
       <StyledAnimatedContent>
         <StyledContentContainer>
           <StyledSectionContainer>
@@ -115,7 +125,7 @@ export function PasswordLogin() {
           <MainButton
             title="Continue"
             onClick={handleLogin}
-            disabled={!authFlowUserEmail || !internalPassword}
+            disabled={!authFlowUserEmail || !internalPassword || loading}
             fullWidth
           />
         </StyledButtonContainer>

server/src/core/auth/auth.resolver.ts

@@ -1,4 +1,4 @@
-import { Args, Mutation, Resolver } from '@nestjs/graphql';
+import { Args, Mutation, Query, Resolver } from '@nestjs/graphql';
 import { AuthTokens } from './dto/token.entity';
 import { TokenService } from './services/token.service';
 import { RefreshTokenInput } from './dto/refresh-token.input';
@@ -13,6 +13,8 @@ import {
   PrismaSelector,
 } from 'src/decorators/prisma-select.decorator';
 import { Prisma } from '@prisma/client';
+import { UserExists } from './dto/user-exists.entity';
+import { CheckUserExistsInput } from './dto/user-exists.input';
 
 @Resolver()
 export class AuthResolver {
@@ -21,6 +23,16 @@ export class AuthResolver {
     private tokenService: TokenService,
   ) {}
 
+  @Query(() => UserExists)
+  async checkUserExists(
+    @Args() checkUserExistsInput: CheckUserExistsInput,
+  ): Promise<UserExists> {
+    const { exists } = await this.authService.checkUserExists(
+      checkUserExistsInput.email,
+    );
+    return { exists };
+  }
+
   @Mutation(() => LoginToken)
   async challenge(@Args() challengeInput: ChallengeInput): Promise<LoginToken> {
     const user = await this.authService.challenge(challengeInput);

server/src/core/auth/dto/challenge.input.ts

@@ -1,12 +1,5 @@
 import { ArgsType, Field } from '@nestjs/graphql';
-import {
-  IsEmail,
-  IsNotEmpty,
-  IsString,
-  Matches,
-  MinLength,
-} from 'class-validator';
-import { PASSWORD_REGEX } from '../auth.util';
+import { IsEmail, IsNotEmpty, IsString, MinLength } from 'class-validator';
 
 @ArgsType()
 export class ChallengeInput {
@@ -18,7 +11,5 @@ export class ChallengeInput {
   @Field(() => String)
   @IsNotEmpty()
   @IsString()
-  @MinLength(8)
-  @Matches(PASSWORD_REGEX, { message: 'password too weak' })
   password: string;
 }

server/src/core/auth/dto/user-exists.entity.ts

@@ -0,0 +1,7 @@
+import { Field, ObjectType } from '@nestjs/graphql';
+
+@ObjectType()
+export class UserExists {
+  @Field(() => Boolean)
+  exists: boolean;
+}

server/src/core/auth/dto/user-exists.input.ts

@@ -0,0 +1,10 @@
+import { ArgsType, Field } from '@nestjs/graphql';
+import { IsNotEmpty, IsString } from 'class-validator';
+
+@ArgsType()
+export class CheckUserExistsInput {
+  @Field(() => String)
+  @IsString()
+  @IsNotEmpty()
+  email: string;
+}

server/src/core/auth/services/auth.service.ts

@@ -11,6 +11,7 @@ import { PASSWORD_REGEX, compareHash, hashPassword } from '../auth.util';
 import { Verify } from '../dto/verify.entity';
 import { TokenService } from './token.service';
 import { Prisma } from '@prisma/client';
+import { UserExists } from '../dto/user-exists.entity';
 
 export type UserPayload = {
   firstName: string;
@@ -26,18 +27,16 @@ export class AuthService {
   ) {}
 
   async challenge(challengeInput: ChallengeInput) {
-    assert(
-      PASSWORD_REGEX.test(challengeInput.password),
-      'Password too weak',
-      BadRequestException,
-    );
-
     let user = await this.userService.findUnique({
       where: {
         email: challengeInput.email,
       },
     });
 
+    const isPasswordValid = PASSWORD_REGEX.test(challengeInput.password);
+
+    assert(!!user || isPasswordValid, 'Password too weak', BadRequestException);
+
     if (!user) {
       const passwordHash = await hashPassword(challengeInput.password);
 
@@ -92,4 +91,14 @@ export class AuthService {
       },
     };
   }
+
+  async checkUserExists(email: string): Promise<UserExists> {
+    const user = await this.userService.findUnique({
+      where: {
+        email,
+      },
+    });
+
+    return { exists: !!user };
+  }
 }