Merge pull request #30 from rkheftan/feat/multiple-client-id

Feat/multiple client

.env

@@ -1,7 +1,8 @@
 VITE_GOOGLE_CLIENT_ID=https://272098283932-bft2gvlgjn8edopg0lnqjq1i9ekdmipt.apps.googleusercontent.com
 VITE_DEFUALT_AUTH_RETURN_URL=/setting/profile
+VITE_APP_URL=https://account.business-harmony.com
 VITE_API_URL=https://accounts.business-harmony.com/api/
 VITE_IDENTITY_URL=https://accounts.business-harmony.com/connect/token
 VITE_IDENTITY_CLIENT_ID=harmony_identity
-VITE_IDENTITY_SCOPE=openid profile offline_access harmony_identity
+VITE_IDENTITY_SCOPE=openid profile offline_access
 IMAGE_BASE_URL=https://accounts.business-harmony.com/uploads/

src/features/authentication/api/identityAPI.ts

@@ -1,6 +1,10 @@
 import apiClient from '@/lib/apiClient';
 
-export interface GenerateTokenWithPassword {
+export interface GenerateToken {
+  client_id: string;
+}
+
+export interface GenerateTokenWithPassword extends GenerateToken {
   username: string;
   password: string;
 }
@@ -18,8 +22,11 @@ export const generateTokenWithPassword = (
 ) => {
   const body = new URLSearchParams();
   body.set('grant_type', 'password');
-  body.set('client_id', import.meta.env.VITE_IDENTITY_CLIENT_ID);
-  body.set('scope', import.meta.env.VITE_IDENTITY_SCOPE);
+  body.set('client_id', request.client_id);
+  body.set(
+    'scope',
+    import.meta.env.VITE_IDENTITY_SCOPE + ' ' + request.client_id,
+  );
   body.set('username', request.username);
   body.set('password', request.password);
 
@@ -34,7 +41,7 @@ export const generateTokenWithPassword = (
   );
 };
 
-export interface GenerateTokenWithOTP {
+export interface GenerateTokenWithOTP extends GenerateToken {
   email?: string;
   phonenumber?: string;
   otp: string;
@@ -43,8 +50,11 @@ export interface GenerateTokenWithOTP {
 export const generateTokenWithOtp = (request: GenerateTokenWithOTP) => {
   const body = new URLSearchParams();
   body.set('grant_type', 'otp');
-  body.set('client_id', import.meta.env.VITE_IDENTITY_CLIENT_ID);
-  body.set('scope', import.meta.env.VITE_IDENTITY_SCOPE);
+  body.set('client_id', request.client_id);
+  body.set(
+    'scope',
+    import.meta.env.VITE_IDENTITY_SCOPE + ' ' + request.client_id,
+  );
   if (request.email) body.set('email', request.email);
   if (request.phonenumber) body.set('phonenumber', request.phonenumber);
   body.set('otp_code', request.otp);
@@ -60,15 +70,18 @@ export const generateTokenWithOtp = (request: GenerateTokenWithOTP) => {
   );
 };
 
-export interface GenerateTokenWithGoogle {
+export interface GenerateTokenWithGoogle extends GenerateToken {
   idToken: string;
 }
 
 export const generateTokenWithGoogle = (request: GenerateTokenWithGoogle) => {
   const body = new URLSearchParams();
   body.set('grant_type', 'google');
-  body.set('client_id', import.meta.env.VITE_IDENTITY_CLIENT_ID);
-  body.set('scope', import.meta.env.VITE_IDENTITY_SCOPE);
+  body.set('client_id', request.client_id);
+  body.set(
+    'scope',
+    import.meta.env.VITE_IDENTITY_SCOPE + ' ' + request.client_id,
+  );
   body.set('idtoken', request.idToken);
 
   return apiClient.post<GenerateTokenResponse>(

src/features/authentication/components/AuthenticationSteps/AuthenticationSteps.tsx

@@ -1,6 +1,11 @@
-import { useState, type JSX } from 'react';
+import { useMemo, useState, type JSX } from 'react';
 import { LoginRegisterForm } from './LoginRegiserForm';
-import type { AuthMode, AuthStep, AuthType } from '../../types/authTypes';
+import type {
+  AuthFactory,
+  AuthMode,
+  AuthStep,
+  AuthType,
+} from '../../types/authTypes';
 import { OtpVerifyForm } from './OtpVerifyForm';
 import { isNumeric } from '@/utils/regexes/isNumeric';
 import { CompleteSignUp } from './CompleteSignUp';
@@ -9,17 +14,12 @@ import { UserStatus, type LoginResult } from '../../types/userTypes';
 import type { CountryCode } from '@/types/commonTypes';
 import { VerifyPhoneNumber } from './VerifyPhoneNumber';
 import { useNavigate, useSearchParams } from 'react-router-dom';
-import { REFRESH_TOKEN_KEY } from '@/providers/AuthProvider';
+import type { GenerateTokenResponse } from '../../api/identityAPI';
+import { useAuth } from '@/hooks/useAuth';
 
 export const AuthenticationSteps = (): JSX.Element => {
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
-  const authReturnUrl: string | null = searchParams.get('returnUrl');
-  const authReturnUrlWithRefreshToken =
-    authReturnUrl + `?token=${sessionStorage.getItem(REFRESH_TOKEN_KEY)}`;
-  authReturnUrl + `?token=${sessionStorage.getItem(REFRESH_TOKEN_KEY)}`;
-  const authReturnUrlOrDefault: string =
-    authReturnUrl ?? import.meta.env.VITE_DEFUALT_AUTH_RETURN_URL;
   const [authMode, setAuthMode] = useState<AuthMode>('register');
   const [authType, setAuthType] = useState<AuthType>('phone');
   const [currentStep, setCurrentStep] = useState<AuthStep>('emailOrPhone');
@@ -29,6 +29,41 @@ export const AuthenticationSteps = (): JSX.Element => {
     useState<CountryCode>('+98');
   const [addedPhoneNumberValue, setAddedPhoneNumberValue] =
     useState<string>('');
+  const [memoryTokenRes, setMemoryTokenRes] = useState<GenerateTokenResponse>();
+  const { login } = useAuth();
+
+  const authFactory: AuthFactory = useMemo(() => {
+    const redirectUrl = searchParams.get('redirect_url');
+    const clientId = searchParams.get('client_id');
+
+    if (!clientId) {
+      const defaultFactory: AuthFactory = {
+        clientId: import.meta.env.VITE_IDENTITY_CLIENT_ID,
+        redirectUrl: import.meta.env.VITE_APP_URL,
+        isCurrentApplication: function () {
+          return this.clientId === import.meta.env.VITE_IDENTITY_CLIENT_ID;
+        },
+        getFullRedirectUrl: function (token: string) {
+          return this.redirectUrl + '?token=' + token;
+        },
+      };
+
+      return defaultFactory;
+    }
+
+    const resFactory: AuthFactory = {
+      clientId: clientId,
+      redirectUrl: redirectUrl as string,
+      isCurrentApplication: function () {
+        return this.clientId === import.meta.env.VITE_IDENTITY_CLIENT_ID;
+      },
+      getFullRedirectUrl: function (token: string) {
+        return this.redirectUrl + '?token=' + token;
+      },
+    };
+
+    return resFactory;
+  }, [searchParams]);
 
   const handleLoginRegister = (value: string, userStatus: UserStatus) => {
     setAuthType(isNumeric(value) ? 'phone' : 'email');
@@ -53,40 +88,54 @@ export const AuthenticationSteps = (): JSX.Element => {
     }
   };
 
-  const handleUserLoggedIn = (loginResult: LoginResult) => {
+  const handleUserLoggedIn = (
+    loginResult: LoginResult,
+    tokenResponse: GenerateTokenResponse,
+  ) => {
+    setMemoryTokenRes(tokenResponse);
+    if (authFactory.isCurrentApplication()) {
+      login(tokenResponse);
+    }
+
     if (loginResult.registeredWithOutPhoneNumber) {
       setCurrentStep('addPhoneNumber');
       return;
     }
 
     if (!loginResult.completedUserInformation) {
-      if (authReturnUrl) {
-        navigate(`/signup?returnUrl=${authReturnUrlWithRefreshToken}`);
+      if (!authFactory.isCurrentApplication()) {
+        navigate(
+          `/signup?returnUrl=${authFactory.getFullRedirectUrl(tokenResponse.refresh_token)}`,
+        );
       } else {
         navigate(`/signup`);
       }
       return;
     }
 
-    redirectToReturnUrl();
+    redirectToReturnUrl(tokenResponse.refresh_token);
   };
 
   const handlePhoneNumberVerified = () => {
-    if (authReturnUrl) {
-      navigate(`/signup?returnUrl=${authReturnUrlWithRefreshToken}`);
+    if (!authFactory.isCurrentApplication()) {
+      navigate(
+        `/signup?returnUrl=${authFactory.getFullRedirectUrl(memoryTokenRes?.refresh_token as string)}`,
+      );
     } else {
       navigate(`/signup`);
     }
   };
 
-  const redirectToReturnUrl = () => {
-    if (!authReturnUrl) {
+  const redirectToReturnUrl = (refreshToken: string) => {
+    if (authFactory.isCurrentApplication()) {
       navigate(import.meta.env.VITE_DEFUALT_AUTH_RETURN_URL);
     } else {
       if (authMode === 'register') {
-        navigate(`/account-created?returnUrl=${authReturnUrlWithRefreshToken}`);
+        navigate(
+          `/account-created?returnUrl=${authFactory.getFullRedirectUrl(refreshToken)}`,
+        );
       } else {
-        location.href = authReturnUrlWithRefreshToken;
+        location.href = authFactory.getFullRedirectUrl(refreshToken);
       }
     }
   };
@@ -95,7 +144,7 @@ export const AuthenticationSteps = (): JSX.Element => {
     <>
       {currentStep === 'emailOrPhone' && (
         <LoginRegisterForm
-          authReturnUrl={authReturnUrlOrDefault}
+          authFactory={authFactory}
           onGoogleAuthenticated={handleUserLoggedIn}
           countryCode={countryCode}
           setCountryCode={setCountryCode}
@@ -109,7 +158,7 @@ export const AuthenticationSteps = (): JSX.Element => {
 
       {currentStep === 'verify' && (
         <OtpVerifyForm
-          authReturnUrl={authReturnUrlOrDefault}
+          authFactory={authFactory}
           countryCode={countryCode}
           onOTPVerified={handleUserLoggedIn}
           onEditValue={() => setCurrentStep('emailOrPhone')}
@@ -121,7 +170,7 @@ export const AuthenticationSteps = (): JSX.Element => {
 
       {currentStep === 'enterPassword' && (
         <EnterPasswordForm
-          authReturnUrl={authReturnUrlOrDefault}
+          authFactory={authFactory}
           loginRegisterValue={loginRegisterValue}
           countryCode={countryCode}
           authType={authType}

src/features/authentication/components/AuthenticationSteps/EnterPasswordForm.tsx

@@ -11,7 +11,7 @@ import {
 } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
-import type { AuthType } from '../../types/authTypes';
+import type { AuthFactory, AuthType } from '../../types/authTypes';
 import type { CountryCode } from '@/types/commonTypes';
 import {
   loginWithPassword,
@@ -22,17 +22,23 @@ import type { LoginResult, PasswordLoginRequest } from '../../types/userTypes';
 import { Icon, useToast } from '@rkheftan/harmony-ui';
 import { useApi } from '@/hooks/useApi';
 import { useAuth } from '@/hooks/useAuth';
-import { generateTokenWithPassword } from '../../api/identityAPI';
+import {
+  generateTokenWithPassword,
+  type GenerateTokenResponse,
+} from '../../api/identityAPI';
 
 export interface EnterPasswordFormProps {
   onEditValue: () => void;
   onLoginWithOTP: () => void;
-  onLoggedIn: (loginResult: LoginResult) => void;
+  onLoggedIn: (
+    loginResult: LoginResult,
+    tokenResponse: GenerateTokenResponse,
+  ) => void;
   emailOrPhone: string;
   authType: AuthType;
   loginRegisterValue: string;
   countryCode: CountryCode;
-  authReturnUrl: string;
+  authFactory: AuthFactory;
 }
 
 export const EnterPasswordForm = ({
@@ -43,7 +49,7 @@ export const EnterPasswordForm = ({
   authType,
   loginRegisterValue,
   countryCode,
-  authReturnUrl,
+  authFactory,
 }: EnterPasswordFormProps) => {
   const { t } = useTranslation('authentication');
   const [passValue, setPassValue] = useState<string>('');
@@ -57,7 +63,6 @@ export const EnterPasswordForm = ({
     useApi(sendEmailOtp);
   const { loading: loginWithPassLoading, execute: loginWithPassCall } =
     useApi(loginWithPassword);
-  const auth = useAuth();
 
   const handleBlur = () => {
     setInputTouched(true);
@@ -72,7 +77,7 @@ export const EnterPasswordForm = ({
           authType === 'phone' ? countryCode + loginRegisterValue : undefined,
         email: authType === 'email' ? loginRegisterValue : undefined,
         password: passValue,
-        returnUrl: authReturnUrl,
+        returnUrl: authFactory.redirectUrl,
       };
       const res = await loginWithPassCall(apiRequest);
 
@@ -82,12 +87,10 @@ export const EnterPasswordForm = ({
         const tokenRes = await generateTokenWithPassword({
           username: apiRequest.email ?? (apiRequest.phoneNumber as string),
           password: apiRequest.password,
-        });
-        auth.login({
-          ...tokenRes.data,
+          client_id: authFactory.clientId,
         });
 
-        onLoggedIn(res);
+        onLoggedIn(res, tokenRes.data);
         toast({
           message: t('verify.youHaveSuccessfullyLoggedIn'),
           severity: 'success',
@@ -134,7 +137,7 @@ export const EnterPasswordForm = ({
           endIcon={<Icon Component={Edit2} />}
           onClick={onEditValue}
         >
-          {emailOrPhone}
+          {authType === 'phone' ? countryCode + emailOrPhone : emailOrPhone}
         </Button>
       </Box>
 

src/features/authentication/components/AuthenticationSteps/GoogleAuthentication.tsx

@@ -10,18 +10,25 @@ import { loginOrSignUpWithGoogle } from '../../api/authorizationAPI';
 import { Google } from 'iconsax-react';
 import { Icon, useToast } from '@rkheftan/harmony-ui';
 import { useApi } from '@/hooks/useApi';
-import { generateTokenWithGoogle } from '../../api/identityAPI';
+import {
+  generateTokenWithGoogle,
+  type GenerateTokenResponse,
+} from '../../api/identityAPI';
 import { useAuth } from '@/hooks/useAuth';
+import type { AuthFactory } from '../../types/authTypes';
 
 export interface GoogleAuthenticationProps {
   disabled: boolean;
-  authReturnUrl: string;
-  onGoogleAuthenticated: (loginResult: LoginResult) => void;
+  authFactory: AuthFactory;
+  onGoogleAuthenticated: (
+    loginResult: LoginResult,
+    tokenResponse: GenerateTokenResponse,
+  ) => void;
 }
 
 export const GoogleAuthentication = ({
   disabled,
-  authReturnUrl,
+  authFactory,
   onGoogleAuthenticated,
 }: GoogleAuthenticationProps) => {
   const { t } = useTranslation('authentication');
@@ -29,7 +36,6 @@ export const GoogleAuthentication = ({
     useApi(loginOrSignUpWithGoogle);
   const toast = useToast();
   const clientRef = useRef<any>(null);
-  const auth = useAuth();
 
   useEffect(() => {
     const script = document.createElement('script');
@@ -47,19 +53,19 @@ export const GoogleAuthentication = ({
         callback: async (resp: GoogleCodeClientResponse) => {
           const apiRequest: LoginOrSignUpWithGoogleRequest = {
             idToken: resp.id_token,
-            returnUrl: authReturnUrl,
+            returnUrl: authFactory.redirectUrl,
           };
           const res = await loginWithGoogleCall(apiRequest);
 
           if (!res) return;
 
           if (res.success) {
-            const tokenRes = await generateTokenWithGoogle(apiRequest);
-            auth.login({
-              ...tokenRes.data,
+            const tokenRes = await generateTokenWithGoogle({
+              ...apiRequest,
+              client_id: authFactory.clientId,
             });
 
-            onGoogleAuthenticated(res);
+            onGoogleAuthenticated(res, tokenRes.data);
           } else {
             toast({
               message: t('loginForm.googleAuthenticationFailed'),

src/features/authentication/components/AuthenticationSteps/LoginRegiserForm.tsx

@@ -2,7 +2,7 @@ import { Button, Stack, TextField, Typography } from '@mui/material';
 import { useRef, useState, type Dispatch } from 'react';
 import { useTranslation } from 'react-i18next';
 import { isNumeric } from '@/utils/regexes/isNumeric';
-import type { AuthType } from '../../types/authTypes';
+import type { AuthFactory, AuthType } from '../../types/authTypes';
 import { isEmail } from '@/utils/regexes/isEmail';
 import { AuthenticationCard } from '../AuthenticationCard';
 import { CountryCodeSelector } from '../CountryCodeSelector';
@@ -13,6 +13,7 @@ import { GoogleAuthentication } from './GoogleAuthentication';
 import { isPhoneNumber } from '@/utils/regexes/isValidPhoneNumber';
 import { useToast } from '@rkheftan/harmony-ui';
 import { useApi } from '@/hooks/useApi';
+import type { GenerateTokenResponse } from '../../api/identityAPI';
 
 export interface LoginRegisterFormProps {
   loginRegisterValue: string;
@@ -22,8 +23,11 @@ export interface LoginRegisterFormProps {
   authType: AuthType;
   setAuthType: Dispatch<AuthType>;
   onLoginRegisterSubmit: (value: string, userStatus: UserStatus) => void;
-  authReturnUrl: string;
-  onGoogleAuthenticated: (loginResult: LoginResult) => void;
+  onGoogleAuthenticated: (
+    loginResult: LoginResult,
+    tokenResponse: GenerateTokenResponse,
+  ) => void;
+  authFactory: AuthFactory;
 }
 
 export function LoginRegisterForm({
@@ -34,8 +38,8 @@ export function LoginRegisterForm({
   authType,
   setAuthType,
   onLoginRegisterSubmit,
-  authReturnUrl,
   onGoogleAuthenticated,
+  authFactory,
 }: LoginRegisterFormProps) {
   const { t } = useTranslation('authentication');
   const textFieldRef = useRef<HTMLDivElement>(null);
@@ -156,7 +160,7 @@ export function LoginRegisterForm({
         </Button>
 
         <GoogleAuthentication
-          authReturnUrl={authReturnUrl}
+          authFactory={authFactory}
           onGoogleAuthenticated={onGoogleAuthenticated}
           disabled={userStatusLoading}
         />

src/features/authentication/components/AuthenticationSteps/OtpVerifyForm.tsx

@@ -2,7 +2,7 @@ import { useTranslation } from 'react-i18next';
 import { Box, Button, Stack, Typography } from '@mui/material';
 import { Edit2 } from 'iconsax-react';
 import DigitInput from '@/components/DigitsInput';
-import type { AuthMode, AuthType } from '../../types/authTypes';
+import type { AuthFactory, AuthMode, AuthType } from '../../types/authTypes';
 import { useEffect, useState } from 'react';
 import { AuthenticationCard } from '../AuthenticationCard';
 import type { LoginRequest, LoginResult } from '../../types/userTypes';
@@ -14,7 +14,10 @@ import {
 import type { CountryCode } from '@/types/commonTypes';
 import { Icon, useToast } from '@rkheftan/harmony-ui';
 import { useApi } from '@/hooks/useApi';
-import { generateTokenWithOtp } from '../../api/identityAPI';
+import {
+  generateTokenWithOtp,
+  type GenerateTokenResponse,
+} from '../../api/identityAPI';
 import { useAuth } from '@/hooks/useAuth';
 
 interface OtpVerifyFormProps {
@@ -23,8 +26,11 @@ interface OtpVerifyFormProps {
   authType: AuthType;
   authMode: AuthMode;
   onEditValue: () => void;
-  onOTPVerified: (loginResult: LoginResult) => void;
-  authReturnUrl: string;
+  onOTPVerified: (
+    loginResult: LoginResult,
+    tokenResponse: GenerateTokenResponse,
+  ) => void;
+  authFactory: AuthFactory;
 }
 
 export function OtpVerifyForm({
@@ -34,7 +40,7 @@ export function OtpVerifyForm({
   authMode,
   onEditValue,
   onOTPVerified,
-  authReturnUrl,
+  authFactory,
 }: OtpVerifyFormProps) {
   const [otpCode, setOtpCode] = useState<string>('');
   const [otpDigitInvalid, setOtpDigitInvalid] = useState<boolean>(false);
@@ -49,7 +55,6 @@ export function OtpVerifyForm({
     useApi(sendEmailOtp);
   const { loading: loginSignUpLoading, execute: loginSignUpCall } =
     useApi(loginOrSignUpWithOtp);
-  const auth = useAuth();
 
   useEffect(() => {
     let interval: NodeJS.Timeout;
@@ -96,7 +101,7 @@ export function OtpVerifyForm({
       otpCode: otpCode,
       phoneNumber: authType === 'phone' ? countryCode + value : undefined,
       email: authType === 'email' ? value : undefined,
-      returnUrl: authReturnUrl,
+      returnUrl: authFactory.redirectUrl,
     };
     const res = await loginSignUpCall(loginRequest);
 
@@ -111,12 +116,10 @@ export function OtpVerifyForm({
         email: loginRequest.email,
         phonenumber: loginRequest.phoneNumber,
         otp: loginRequest.otpCode,
-      });
-      auth.login({
-        ...tokenRes.data,
+        client_id: authFactory.clientId,
       });
 
-      onOTPVerified(res);
+      onOTPVerified(res, tokenRes.data);
 
       toast({
         message:

src/features/authentication/types/authTypes.ts

@@ -8,3 +8,10 @@ export type AuthStep =
   | 'enterPassword'
   | 'addPhoneNumber'
   | 'addedPhoneNumberVerify';
+
+export interface AuthFactory {
+  clientId: string;
+  redirectUrl: string;
+  isCurrentApplication: () => boolean;
+  getFullRedirectUrl: (token: string) => string;
+}