awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-15 10:35:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2244 from LemmyMwaura/password-protect-secret-share

Browse Source 
feat: password protect secret share
This commit is contained in:
Maidul Islam
2024-08-30 13:43:24 -04:00
committed by GitHub
parent b975996158 3ddb4cd27a
commit 7c540b6be8
13 changed files with 280 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/hooks/api/secretSharing/queries.ts
+20 -19
View File
@@ -7,7 +7,11 @@ import { TSharedSecret, TViewSharedSecretResponse } from "./types";
export const secretSharingKeys = {
allSharedSecrets: () => ["sharedSecrets"] as const,
specificSharedSecrets: ({ offset, limit }: { offset: number; limit: number }) =>
[...secretSharingKeys.allSharedSecrets(), { offset, limit }] as const
[...secretSharingKeys.allSharedSecrets(), { offset, limit }] as const,
getSecretById: (arg: { id: string; hashedHex: string; password?: string }) => [
"shared-secret",
arg
]
};
export const useGetSharedSecrets = ({
@@ -38,31 +42,28 @@ export const useGetSharedSecrets = ({
export const useGetActiveSharedSecretById = ({
sharedSecretId,
hashedHex
hashedHex,
password
}: {
sharedSecretId: string;
hashedHex: string;
password?: string;
}) => {
return useQuery<TViewSharedSecretResponse, [string]>({
enabled: Boolean(sharedSecretId) && Boolean(hashedHex),
queryFn: async () => {
const params = new URLSearchParams({
hashedHex
});
const { data } = await apiRequest.get<TViewSharedSecretResponse>(
return useQuery<TViewSharedSecretResponse>(
secretSharingKeys.getSecretById({ id: sharedSecretId, hashedHex, password }),
async () => {
const { data } = await apiRequest.post<TViewSharedSecretResponse>(
`/api/v1/secret-sharing/public/${sharedSecretId}`,
{
params
hashedHex,
password
}
);
return {
encryptedValue: data.encryptedValue,
iv: data.iv,
tag: data.tag,
accessType: data.accessType,
orgName: data.orgName
};
return data;
},
{
enabled: Boolean(sharedSecretId) && Boolean(hashedHex)
}
});
);
};
frontend/src/hooks/api/secretSharing/types.ts
+10 -5
View File
@@ -15,6 +15,7 @@ export type TSharedSecret = {
export type TCreateSharedSecretRequest = {
name?: string;
password?: string;
encryptedValue: string;
hashedHex: string;
iv: string;
@@ -25,11 +26,14 @@ export type TCreateSharedSecretRequest = {
};
export type TViewSharedSecretResponse = {
encryptedValue: string;
iv: string;
tag: string;
accessType: SecretSharingAccessType;
orgName?: string;
isPasswordProtected: boolean;
secret: {
encryptedValue: string;
iv: string;
tag: string;
accessType: SecretSharingAccessType;
orgName?: string;
};
};
export type TDeleteSharedSecretRequest = {
@@ -40,3 +44,4 @@ export enum SecretSharingAccessType {
Anyone = "anyone",
Organization = "organization"
}
frontend/src/views/ShareSecretPublicPage/components/ShareSecretForm.tsx
+25 -2
View File
@@ -32,7 +32,8 @@ const viewLimitOptions = [
const schema = z.object({
name: z.string().optional(),
secret: z.string(),
password: z.string().optional(),
secret: z.string().min(1),
expiresIn: z.string(),
viewLimit: z.string(),
accessType: z.nativeEnum(SecretSharingAccessType).optional()
@@ -67,7 +68,14 @@ export const ShareSecretForm = ({ isPublic, value }: Props) => {
}
});
const onFormSubmit = async ({ name, secret, expiresIn, viewLimit, accessType }: FormData) => {
const onFormSubmit = async ({
name,
password,
secret,
expiresIn,
viewLimit,
accessType
}: FormData) => {
try {
const expiresAt = new Date(new Date().getTime() + Number(expiresIn));
@@ -80,6 +88,7 @@ export const ShareSecretForm = ({ isPublic, value }: Props) => {
const { id } = await createSharedSecret.mutateAsync({
name,
password,
encryptedValue: ciphertext,
hashedHex,
iv,
@@ -149,6 +158,20 @@ export const ShareSecretForm = ({ isPublic, value }: Props) => {
</FormControl>
)}
/>
<Controller
control={control}
name="password"
render={({ field, fieldState: { error } }) => (
<FormControl
label="Password"
isError={Boolean(error)}
errorText={error?.message}
isOptional
>
<Input {...field} placeholder="Password" type="password" />
</FormControl>
)}
/>
<Controller
control={control}
name="expiresIn"
frontend/src/views/ViewSecretPublicPage/ViewSecretPublicPage.tsx
+37 -5
View File
@@ -1,26 +1,43 @@
import { useState } from "react";
import Image from "next/image";
import Link from "next/link";
import { useRouter } from "next/router";
import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { AxiosError } from "axios";
import { useGetActiveSharedSecretById } from "@app/hooks/api/secretSharing";
import { SecretContainer, SecretErrorContainer } from "./components";
import { PasswordContainer,SecretContainer, SecretErrorContainer } from "./components";
export const ViewSecretPublicPage = () => {
const router = useRouter();
const [password, setPassword] = useState<string>();
const { id, key: urlEncodedPublicKey } = router.query;
const [hashedHex, key] = urlEncodedPublicKey
? urlEncodedPublicKey.toString().split("-")
: ["", ""];
const { data: secret, error } = useGetActiveSharedSecretById({
const {
data: fetchSecret,
error,
isLoading,
isFetching
} = useGetActiveSharedSecretById({
sharedSecretId: id as string,
hashedHex
hashedHex,
password
});
const isInvalidCredential =
((error as AxiosError)?.response?.data as { message: string })?.message ===
"Invalid credentials";
const shouldShowPasswordPrompt =
isInvalidCredential || (fetchSecret?.isPasswordProtected && !fetchSecret.secret);
const isValidatingPassword = Boolean(password) && isFetching;
return (
<div className="flex h-screen flex-col justify-between overflow-auto bg-gradient-to-tr from-mineshaft-700 to-bunker-800 text-gray-200 dark:[color-scheme:dark]">
<div />
@@ -52,8 +69,23 @@ export const ViewSecretPublicPage = () => {
</a>
</p>
</div>
{secret && key && <SecretContainer secret={secret} secretKey={key} />}
{error && <SecretErrorContainer />}
{(shouldShowPasswordPrompt || isValidatingPassword) && (
<PasswordContainer
isSubmitting={isValidatingPassword}
onPasswordSubmit={(el) => {
setPassword(el);
}}
isInvalidCredential={!isFetching && isInvalidCredential}
/>
)}
{!isLoading && (
<>
{!error && fetchSecret?.secret && key && (
<SecretContainer secret={fetchSecret.secret} secretKey={key} />
)}
{error && !isInvalidCredential && <SecretErrorContainer />}
</>
)}
<div className="m-auto my-8 flex w-full">
<div className="w-full border-t border-mineshaft-600" />
</div>
frontend/src/views/ViewSecretPublicPage/components/PasswordContainer.tsx
+80
View File
@@ -0,0 +1,80 @@
import { Controller, useForm } from "react-hook-form";
import { faArrowRight, faSpinner } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { Button, FormControl, IconButton, Input } from "@app/components/v2";
type Props = {
onPasswordSubmit: (val: any) => void;
isSubmitting?: boolean;
isInvalidCredential?: boolean;
};
const formSchema = z.object({
password: z.string()
});
export type FormData = z.infer<typeof formSchema>;
export const PasswordContainer = ({
onPasswordSubmit,
isSubmitting,
isInvalidCredential
}: Props) => {
const { control, handleSubmit } = useForm<FormData>({
resolver: zodResolver(formSchema)
});
const onFormSubmit = async ({ password }: FormData) => {
onPasswordSubmit(password);
};
return (
<div className="rounded-lg border border-mineshaft-600 bg-mineshaft-800 p-4">
<form onSubmit={handleSubmit(onFormSubmit)}>
<Controller
control={control}
name="password"
defaultValue=""
render={({ field, fieldState: { error } }) => (
<FormControl
isError={Boolean(error) || isInvalidCredential}
errorText={isInvalidCredential ? "Invalid credential" : error?.message}
isRequired
label="Password"
>
<div className="flex items-center justify-between gap-2 rounded-md">
<Input {...field} placeholder="Enter Password to view secret" type="password" />
<div className="flex">
<IconButton
ariaLabel="copy icon"
colorSchema="secondary"
className="group relative"
onClick={handleSubmit(onFormSubmit)}
>
<FontAwesomeIcon
className={isSubmitting ? "fa-spin" : ""}
icon={isSubmitting ? faSpinner : faArrowRight}
/>
</IconButton>
</div>
</div>
</FormControl>
)}
/>
</form>
<Button
className="w-full bg-mineshaft-700 py-3 text-bunker-200"
colorSchema="primary"
variant="outline_bg"
size="sm"
onClick={() => window.open("https://app.infisical.com/share-secret", "_blank")}
rightIcon={<FontAwesomeIcon icon={faArrowRight} className="pl-2" />}
>
Share your own secret
</Button>
</div>
);
};
frontend/src/views/ViewSecretPublicPage/components/SecretContainer.tsx
+1 -1
View File
@@ -14,7 +14,7 @@ import { useTimedReset, useToggle } from "@app/hooks";
import { TViewSharedSecretResponse } from "@app/hooks/api/secretSharing";
type Props = {
secret: TViewSharedSecretResponse;
secret: TViewSharedSecretResponse["secret"];
secretKey: string;
};
frontend/src/views/ViewSecretPublicPage/components/index.tsx
+1
View File
@@ -1,2 +1,3 @@
export { PasswordContainer } from "./PasswordContainer";
export { SecretContainer } from "./SecretContainer";
export { SecretErrorContainer } from "./SecretErrorContainer";