Merge pull request #450 from authorizerdev/fix-user-verification

fix: user verification

Author: lakhansamani

app/package-lock.json

@@ -12,7 +12,7 @@
 	"author": "Lakhan Samani",
 	"license": "ISC",
 	"dependencies": {
-		"@authorizerdev/authorizer-react": "^1.2.0",
+		"@authorizerdev/authorizer-react": "^1.3.1",
 		"@types/react": "^17.0.15",
 		"@types/react-dom": "^17.0.9",
 		"esbuild": "^0.12.17",

app/package.json

@@ -33,7 +33,6 @@ export default function App() {
 		...window['__authorizer__'],
 		...urlProps,
 	};
-	console.log({ globalState });
 	return (
 		<div
 			style={{

app/src/App.tsx

@@ -53,7 +53,7 @@ const Features = ({ variables, setVariables }: any) => {
 				</Flex>
 				<Flex>
 					<Flex w="100%" justifyContent="start" alignItems="center">
-						<Text fontSize="sm">Basic Authentication:</Text>
+						<Text fontSize="sm">Email Basic Authentication:</Text>
 					</Flex>
 					<Flex justifyContent="start">
 						<InputField
@@ -64,6 +64,19 @@ const Features = ({ variables, setVariables }: any) => {
 						/>
 					</Flex>
 				</Flex>
+				<Flex>
+					<Flex w="100%" justifyContent="start" alignItems="center">
+						<Text fontSize="sm">Mobile Basic Authentication:</Text>
+					</Flex>
+					<Flex justifyContent="start">
+						<InputField
+							variables={variables}
+							setVariables={setVariables}
+							inputType={SwitchInputType.DISABLE_MOBILE_BASIC_AUTHENTICATION}
+							hasReversedValue
+						/>
+					</Flex>
+				</Flex>
 				<Flex>
 					<Flex w="100%" justifyContent="start" alignItems="center">
 						<Text fontSize="sm">Sign Up:</Text>

app/yarn.lock

@@ -83,6 +83,7 @@ export const SwitchInputType = {
 	DISABLE_MAGIC_LINK_LOGIN: 'DISABLE_MAGIC_LINK_LOGIN',
 	DISABLE_EMAIL_VERIFICATION: 'DISABLE_EMAIL_VERIFICATION',
 	DISABLE_BASIC_AUTHENTICATION: 'DISABLE_BASIC_AUTHENTICATION',
+	DISABLE_MOBILE_BASIC_AUTHENTICATION: 'DISABLE_MOBILE_BASIC_AUTHENTICATION',
 	DISABLE_SIGN_UP: 'DISABLE_SIGN_UP',
 	DISABLE_REDIS_FOR_ENV: 'DISABLE_REDIS_FOR_ENV',
 	DISABLE_STRONG_PASSWORD: 'DISABLE_STRONG_PASSWORD',
@@ -167,6 +168,7 @@ export interface envVarTypes {
 	DISABLE_MAGIC_LINK_LOGIN: boolean;
 	DISABLE_EMAIL_VERIFICATION: boolean;
 	DISABLE_BASIC_AUTHENTICATION: boolean;
+	DISABLE_MOBILE_BASIC_AUTHENTICATION: boolean;
 	DISABLE_SIGN_UP: boolean;
 	DISABLE_STRONG_PASSWORD: boolean;
 	OLD_ADMIN_SECRET: string;

dashboard/src/components/EnvComponents/Features.tsx

@@ -65,6 +65,7 @@ export const EnvVariablesQuery = `
       DISABLE_MAGIC_LINK_LOGIN
       DISABLE_EMAIL_VERIFICATION
       DISABLE_BASIC_AUTHENTICATION
+      DISABLE_MOBILE_BASIC_AUTHENTICATION
       DISABLE_SIGN_UP
       DISABLE_STRONG_PASSWORD
       DISABLE_REDIS_FOR_ENV
@@ -97,6 +98,7 @@ export const UserDetailsQuery = `
         id
         email
         email_verified
+        phone_number_verified
         given_name
         family_name
         middle_name

dashboard/src/constants.ts

@@ -86,6 +86,7 @@ const Environment = () => {
 		DISABLE_MAGIC_LINK_LOGIN: false,
 		DISABLE_EMAIL_VERIFICATION: false,
 		DISABLE_BASIC_AUTHENTICATION: false,
+		DISABLE_MOBILE_BASIC_AUTHENTICATION: false,
 		DISABLE_SIGN_UP: false,
 		DISABLE_STRONG_PASSWORD: false,
 		OLD_ADMIN_SECRET: '',

dashboard/src/graphql/queries/index.ts

@@ -165,14 +165,25 @@ export default function Users() {
 	};
 
 	const userVerificationHandler = async (user: userDataTypes) => {
-		const { id, email } = user;
+		const { id, email, phone_number } = user;
+		let params = {};
+		if (email) {
+			params = {
+				id,
+				email,
+				email_verified: true,
+			};
+		}
+		if (phone_number) {
+			params = {
+				id,
+				phone_number,
+				phone_number_verified: true,
+			};
+		}
 		const res = await client
 			.mutation(UpdateUser, {
-				params: {
-					id,
-					email,
-					email_verified: true,
-				},
+				params,
 			})
 			.toPromise();
 		if (res.error) {
@@ -298,7 +309,7 @@ export default function Users() {
 						<Table variant="simple">
 							<Thead>
 								<Tr>
-									<Th>Email</Th>
+									<Th>Email / Phone</Th>
 									<Th>Created At</Th>
 									<Th>Signup Methods</Th>
 									<Th>Roles</Th>
@@ -314,10 +325,15 @@ export default function Users() {
 							</Thead>
 							<Tbody>
 								{userList.map((user: userDataTypes) => {
-									const { email_verified, created_at, ...rest }: any = user;
+									const {
+										email_verified,
+										phone_number_verified,
+										created_at,
+										...rest
+									}: any = user;
 									return (
 										<Tr key={user.id} style={{ fontSize: 14 }}>
-											<Td maxW="300">{user.email}</Td>
+											<Td maxW="300">{user.email || user.phone_number}</Td>
 											<Td>
 												{dayjs(user.created_at * 1000).format('MMM DD, YYYY')}
 											</Td>
@@ -327,9 +343,15 @@ export default function Users() {
 												<Tag
 													size="sm"
 													variant="outline"
-													colorScheme={user.email_verified ? 'green' : 'yellow'}
+													colorScheme={
+														user.email_verified || user.phone_number_verified
+															? 'green'
+															: 'yellow'
+													}
 												>
-													{user.email_verified.toString()}
+													{(
+														user.email_verified || user.phone_number_verified
+													).toString()}
 												</Tag>
 											</Td>
 											<Td>
@@ -368,13 +390,14 @@ export default function Users() {
 														</Flex>
 													</MenuButton>
 													<MenuList>
-														{!user.email_verified && (
-															<MenuItem
-																onClick={() => userVerificationHandler(user)}
-															>
-																Verify User
-															</MenuItem>
-														)}
+														{!user.email_verified &&
+															!user.phone_number_verified && (
+																<MenuItem
+																	onClick={() => userVerificationHandler(user)}
+																>
+																	Verify User
+																</MenuItem>
+															)}
 														<EditUserModal
 															user={rest}
 															updateUserList={updateUserList}