feat: multi client id use added

.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('client_id', request.client_id);
-  body.set('scope', import.meta.env.VITE_IDENTITY_SCOPE);
+  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('client_id', request.client_id);
-  body.set('scope', import.meta.env.VITE_IDENTITY_SCOPE);
+  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('client_id', request.client_id);
-  body.set('scope', import.meta.env.VITE_IDENTITY_SCOPE);
+  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

@@ -3,7 +3,6 @@ import { LoginRegisterForm } from './LoginRegiserForm';
 import type {
   AuthFactory,
   AuthMode,
-  AuthRedirector,
   AuthStep,
   AuthType,
 } from '../../types/authTypes';
@@ -15,7 +14,8 @@ 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();
@@ -29,6 +29,8 @@ 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');
@@ -37,9 +39,13 @@ export const AuthenticationSteps = (): JSX.Element => {
     if (!clientId) {
       const defaultFactory: AuthFactory = {
         clientId: import.meta.env.VITE_IDENTITY_CLIENT_ID,
-        redirectUrl: 'accounts.',
+        redirectUrl: import.meta.env.VITE_APP_URL,
-        accountsApplication
+        isCurrentApplication: function () {
-        setLocalToken: true,
+          return this.clientId === import.meta.env.VITE_IDENTITY_CLIENT_ID;
+        },
+        getFullRedirectUrl: function (token: string) {
+          return this.redirectUrl + '?token=' + token;
+        },
       };
 
       return defaultFactory;
@@ -48,7 +54,9 @@ export const AuthenticationSteps = (): JSX.Element => {
     const resFactory: AuthFactory = {
       clientId: clientId,
       redirectUrl: redirectUrl as string,
-      setLocalToken: true,
+      isCurrentApplication: function () {
+        return this.clientId === import.meta.env.VITE_IDENTITY_CLIENT_ID;
+      },
       getFullRedirectUrl: function (token: string) {
         return this.redirectUrl + '?token=' + token;
       },
@@ -82,17 +90,22 @@ export const AuthenticationSteps = (): JSX.Element => {
 
   const handleUserLoggedIn = (
     loginResult: LoginResult,
-    refreshToken: string,
+    tokenResponse: GenerateTokenResponse,
   ) => {
+    setMemoryTokenRes(tokenResponse);
+    if (authFactory.isCurrentApplication()) {
+      login(tokenResponse);
+    }
+
     if (loginResult.registeredWithOutPhoneNumber) {
       setCurrentStep('addPhoneNumber');
       return;
     }
 
     if (!loginResult.completedUserInformation) {
-      if (authFactory.redirectUrl) {
+      if (!authFactory.isCurrentApplication()) {
         navigate(
-          `/signup?returnUrl=${authFactory.getFullRedirectUrl(refreshToken)}`,
+          `/signup?returnUrl=${authFactory.getFullRedirectUrl(tokenResponse.refresh_token)}`,
         );
       } else {
         navigate(`/signup`);
@@ -100,13 +113,13 @@ export const AuthenticationSteps = (): JSX.Element => {
       return;
     }
 
-    redirectToReturnUrl(refreshToken);
+    redirectToReturnUrl(tokenResponse.refresh_token);
   };
 
-  const handlePhoneNumberVerified = (refreshToken: string) => {
+  const handlePhoneNumberVerified = () => {
-    if (authFactory.redirectUrl) {
+    if (!authFactory.isCurrentApplication()) {
       navigate(
-        `/signup?returnUrl=${authFactory.getFullRedirectUrl(refreshToken)}`,
+        `/signup?returnUrl=${authFactory.getFullRedirectUrl(memoryTokenRes?.refresh_token as string)}`,
       );
     } else {
       navigate(`/signup`);
@@ -114,7 +127,7 @@ export const AuthenticationSteps = (): JSX.Element => {
   };
 
   const redirectToReturnUrl = (refreshToken: string) => {
-    if (!authFactory.redirectUrl) {
+    if (authFactory.isCurrentApplication()) {
       navigate(import.meta.env.VITE_DEFUALT_AUTH_RETURN_URL);
     } else {
       if (authMode === 'register') {
@@ -131,7 +144,7 @@ export const AuthenticationSteps = (): JSX.Element => {
     <>
       {currentStep === 'emailOrPhone' && (
         <LoginRegisterForm
-          authReturnUrl={authReturnUrlOrDefault}
+          authFactory={authFactory}
           onGoogleAuthenticated={handleUserLoggedIn}
           countryCode={countryCode}
           setCountryCode={setCountryCode}
@@ -145,7 +158,7 @@ export const AuthenticationSteps = (): JSX.Element => {
 
       {currentStep === 'verify' && (
         <OtpVerifyForm
-          authReturnUrl={authReturnUrlOrDefault}
+          authFactory={authFactory}
           countryCode={countryCode}
           onOTPVerified={handleUserLoggedIn}
           onEditValue={() => setCurrentStep('emailOrPhone')}
@@ -157,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,
-        });
+          client_id: authFactory.clientId,
-        auth.login({
-          ...tokenRes.data,
         });
 
-        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,14 +10,20 @@ 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;
   authFactory: AuthFactory;
-  onGoogleAuthenticated: (loginResult: LoginResult) => void;
+  onGoogleAuthenticated: (
+    loginResult: LoginResult,
+    tokenResponse: GenerateTokenResponse,
+  ) => void;
 }
 
 export const GoogleAuthentication = ({
@@ -30,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');
@@ -55,12 +60,12 @@ export const GoogleAuthentication = ({
           if (!res) return;
 
           if (res.success) {
-            const tokenRes = await generateTokenWithGoogle(apiRequest);
+            const tokenRes = await generateTokenWithGoogle({
-            auth.login({
+              ...apiRequest,
-              ...tokenRes.data,
+              client_id: authFactory.clientId,
             });
 
-            onGoogleAuthenticated(res);
+            onGoogleAuthenticated(res, tokenRes.data);
           } else {
             toast({
               message: t('loginForm.googleAuthenticationFailed'),

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

@@ -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,7 +23,10 @@ export interface LoginRegisterFormProps {
   authType: AuthType;
   setAuthType: Dispatch<AuthType>;
   onLoginRegisterSubmit: (value: string, userStatus: UserStatus) => void;
-  onGoogleAuthenticated: (loginResult: LoginResult) => void;
+  onGoogleAuthenticated: (
+    loginResult: LoginResult,
+    tokenResponse: GenerateTokenResponse,
+  ) => void;
   authFactory: AuthFactory;
 }
 
@@ -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;
+  onOTPVerified: (
-  authReturnUrl: string;
+    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,
-      });
+        client_id: authFactory.clientId,
-      auth.login({
-        ...tokenRes.data,
       });
 
-      onOTPVerified(res);
+      onOTPVerified(res, tokenRes.data);
 
       toast({
         message:

src/features/authentication/types/authTypes.ts

@@ -11,7 +11,7 @@ export type AuthStep =
 
 export interface AuthFactory {
   clientId: string;
-  redirectUrl: string | null;
+  redirectUrl: string;
-  accountsApplication: boolean;
+  isCurrentApplication: () => boolean;
   getFullRedirectUrl: (token: string) => string;
 }