add key to list

Author: peintnermax

apps/login/src/components/sign-in-with-idp.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { idpTypeToSlug } from "@/lib/idp";
-import { redictToIdp } from "@/lib/server/idp";
+import { redirectToIdp } from "@/lib/server/idp";
 import {
   IdentityProvider,
   IdentityProviderType,
@@ -30,9 +30,9 @@ export function SignInWithIdp({
   organization,
   linkOnly,
 }: Readonly<SignInWithIDPProps>) {
-  const [state, action, _isPending] = useActionState(redictToIdp, {});
+  const [state, action, _isPending] = useActionState(redirectToIdp, {});
 
-  const renderIDPButton = (idp: IdentityProvider) => {
+  const renderIDPButton = (idp: IdentityProvider, index: number) => {
     const { id, name, type } = idp;
 
     const components: Partial<
@@ -56,7 +56,7 @@ export function SignInWithIdp({
 
     const Component = components[type];
     return Component ? (
-      <form action={action} className="flex">
+      <form action={action} className="flex" key={`idp-${index}`}>
         <input type="hidden" name="id" value={id} />
         <input type="hidden" name="provider" value={idpTypeToSlug(type)} />
         <input type="hidden" name="authRequestId" value={authRequestId} />

apps/login/src/lib/server/idp.ts

@@ -11,12 +11,12 @@ import { getNextUrl } from "../client";
 import { checkEmailVerification } from "../verify-helper";
 import { createSessionForIdpAndUpdateCookie } from "./cookie";
 
-export type RedictToIdpState = { error?: string | null } | undefined;
+export type RedirectToIdpState = { error?: string | null } | undefined;
 
-export async function redictToIdp(
-  prevState: RedictToIdpState,
+export async function redirectToIdp(
+  prevState: RedirectToIdpState,
   formData: FormData,
-): Promise<RedictToIdpState> {
+): Promise<RedirectToIdpState> {
   const params = new URLSearchParams();
 
   const linkOnly = formData.get("linkOnly") === "true";