Repository: Significant-Gravitas/Auto-GPT
File: autogpt_platform/frontend/src/app/profile/page.tsx (TypeScript)

Code before:
  if (error || !user || !supabase) {
    router.push("/login");
    return null;
  }

  //TODO: Remove this once we have more providers
  delete providers["notion"];
  delete providers["google"];

  return (
    <div>
      <p>Hello {user.email}</p>
      <Button onClick={() => supabase.auth.signOut()}>Log out</Button>
      <div>
        {/* <Alert className="mb-2 mt-2">
          <AlertDescription>Heads up!</AlertDescription>
          <AlertDescription>
            <p>
              You need to manually remove credentials from the Notion after
              deleting them here, see{" "}
            </p>
            <a href="https://www.notion.so/help/add-and-manage-connections-with-the-api#manage-connections-in-your-workspace">
              Notion documentation
            </a>
          </AlertDescription>
        </Alert> */}
        {Object.entries(providers).map(([providerName, provider]) => {
          return (
            <div key={provider.provider} className="mh-2">
              <Separator />
              <div className="text-xl">{provider.providerName}</div>
              {provider.savedApiKeys.length > 0 && (
                <div>
                  <div className="text-md">API Keys</div>
                  {provider.savedApiKeys.map((apiKey) => (
                    <div key={apiKey.id} className="flex flex-row">
                      <p className="p-2">
                        {apiKey.id} - {apiKey.title}
                      </p>
                      <Button
                        variant="destructive"
                        onClick={() =>
                          removeCredentials(providerName, apiKey.id)
                        }
                      >
                        Delete
                      </Button>
                    </div>
                  ))}
                </div>
              )}

Review comment (suggestion):
I don't think it's scalable to do this here for every single provider that doesn't have a revocation endpoint. A general note saying "Hey, you may also have to delete the connection with AutoGPT in your {provider} settings" would be plenty. Could be here or in the documentation for the platform.

Or raise HTTP 501 in the handler or the endpoint and get the message from there.

Bottom line: minimal differentiation per provider in the front end.

Code after:
      } catch (error: any) {
        toast({
          title: "Something went wrong when deleting credentials: " + error,
          variant: "destructive",
          duration: 2000,
        });
      }
    },
    [providers, toast],
  );

  if (isLoading || !providers || !providers) {
    return (
      <div className="flex h-[80vh] items-center justify-center">
        <FaSpinner className="mr-2 h-16 w-16 animate-spin" />
      </div>
    );
  }

  if (error || !user || !supabase) {
    router.push("/login");
    return null;
  }

  const allCredentials = Object.values(providers).flatMap((provider) =>
    [...provider.savedOAuthCredentials, ...provider.savedApiKeys].map(
      (credentials) => ({
        ...credentials,
        provider: provider.provider,
        providerName: provider.providerName,
        ProviderIcon: providerIcons[provider.provider],
        TypeIcon: { oauth2: IconUser, api_key: IconKey }[credentials.type],
      }),
    ),
  );

  return (
    <div className="mx-auto max-w-3xl md:py-8">
      <div className="flex items-center justify-between">
        <p>Hello {user.email}</p>
        <Button onClick={() => supabase.auth.signOut()}>
          <LogOutIcon className="mr-1.5 size-4" />
          Log out
        </Button>
      </div>
      <Separator className="my-6" />
      <h2 className="mb-4 text-lg">Connections & Credentials</h2>
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead>Provider</TableHead>