diff --git a/frontend/web/src/pages/AuthCallback.tsx b/frontend/web/src/pages/AuthCallback.tsx
index e157c2d..814407e 100644
--- a/frontend/web/src/pages/AuthCallback.tsx
+++ b/frontend/web/src/pages/AuthCallback.tsx
@@ -34,11 +34,11 @@ const AuthCallback = () => {
       return;
     }
 
-    const idpName = last(state.split("-"));
-    if (!idpName) {
+    const idpId = last(state.split("-"));
+    if (!idpId) {
       setState({
         loading: false,
-        errorMessage: "No identity provider name found in the state parameter.",
+        errorMessage: "No identity provider found in the state parameter.",
       });
       return;
     }
@@ -47,7 +47,7 @@ const AuthCallback = () => {
     (async () => {
       try {
         await authServiceClient.signInWithSSO({
-          idpName,
+          idpId,
           code,
           redirectUri,
         });
diff --git a/frontend/web/src/pages/SignIn.tsx b/frontend/web/src/pages/SignIn.tsx
index 60d5003..134faae 100644
--- a/frontend/web/src/pages/SignIn.tsx
+++ b/frontend/web/src/pages/SignIn.tsx
@@ -62,7 +62,7 @@ const SignIn: React.FC = () => {
   };
 
   const handleSignInWithIdentityProvider = async (identityProvider: IdentityProvider) => {
-    const stateQueryParameter = `auth.signin.${identityProvider.title}-${identityProvider.name}`;
+    const stateQueryParameter = `auth.signin.${identityProvider.title}-${identityProvider.id}`;
     if (identityProvider.type === IdentityProvider_Type.OAUTH2) {
       const redirectUri = absolutifyLink("/auth/callback");
       const oauth2Config = identityProvider.config?.oauth2;
@@ -131,7 +131,7 @@ const SignIn: React.FC = () => {
               <div className="w-full flex flex-col space-y-2">
                 {workspaceStore.setting.identityProviders.map((identityProvider) => (
                   <Button
-                    key={identityProvider.name}
+                    key={identityProvider.id}
                     variant="outlined"
                     color="neutral"
                     className="w-full"