BA
Better Auth•5mo ago
david

discord connection + auth

how can i let the user connect his discord account and then on sign in page i want to have a sign in option with discord but only if the user connected his discord?
Solution:
const accounts = await authClient.listAccounts();

const hasDiscord = accounts.data?.find((account) => account.provider === "discord");
const accounts = await authClient.listAccounts();

const hasDiscord = accounts.data?.find((account) => account.provider === "discord");
...
Jump to solution
5 Replies
sebastian
sebastian•5mo ago
Can you precise more? I dont undestand at all what are you trying to achieve with oauth theres no sign in or sign up, oauth handles the logins for you you can use cookies if you want to show users what they used before
david
davidOP•5mo ago
i found that i have a function to link account i managed to do this but idk how i can check if the user has discord connected in case he wants to disconnect his account
sebastian
sebastian•5mo ago
on server side you can use: 
const accounts = await auth.api.listUserAccounts({
            headers: c.req.raw.headers
        })

const hasDiscord = accounts.find((account) => account.provider === "discord");
const accounts = await auth.api.listUserAccounts({
            headers: c.req.raw.headers
        })

const hasDiscord = accounts.find((account) => account.provider === "discord");
on client side you use authClient if hasDiscord is true then user has discord connected
Solution
sebastian
sebastian•5mo ago
const accounts = await authClient.listAccounts();

const hasDiscord = accounts.data?.find((account) => account.provider === "discord");
const accounts = await authClient.listAccounts();

const hasDiscord = accounts.data?.find((account) => account.provider === "discord");
This is for client in case you don't use Hono as your backend. Havent tested it but should work fine
david
davidOP•5mo ago
trying it rn 
import { Logout } from "@/components/logout";
import { DiscordButton } from "@/components/discord-button";
import { auth } from "@/lib/auth";
import { headers } from "next/headers";

export default async function Dashboard() {
  const session = await auth.api.getSession({
    headers: await headers(),
  });

  console.log("session", session);

  const accounts = await auth.api.listUserAccounts({
    headers: await headers(),
  });

  const hasDiscord = accounts.find((account) => account.provider === "discord");

  console.log("hasDiscord", hasDiscord);

  return (
    <div className="flex flex-col items-center justify-center h-screen">
      <DiscordButton isDiscordLinked={!!hasDiscord} />
      <Logout />
    </div>
  );
}
import { Logout } from "@/components/logout";
import { DiscordButton } from "@/components/discord-button";
import { auth } from "@/lib/auth";
import { headers } from "next/headers";

export default async function Dashboard() {
  const session = await auth.api.getSession({
    headers: await headers(),
  });

  console.log("session", session);

  const accounts = await auth.api.listUserAccounts({
    headers: await headers(),
  });

  const hasDiscord = accounts.find((account) => account.provider === "discord");

  console.log("hasDiscord", hasDiscord);

  return (
    <div className="flex flex-col items-center justify-center h-screen">
      <DiscordButton isDiscordLinked={!!hasDiscord} />
      <Logout />
    </div>
  );
}
"use client";

import { authClient } from "@/lib/auth-client";
import { Button } from "./ui/button";
import { IconBrandDiscord } from "@tabler/icons-react";
import { useRouter } from "next/navigation";

export function DiscordButton({
  isDiscordLinked,
}: {
  isDiscordLinked: boolean;
}) {
  const router = useRouter();

  const handleLinkDiscord = async () => {
    await authClient.linkSocial({
      provider: "discord",
      callbackURL: "/dashboard",
    });
  };

  const handleUnlinkDiscord = async () => {
    const status = await authClient.unlinkAccount({
      providerId: "discord",
    });

    if (status.error) {
      console.error(status.error);
    }

    router.refresh();
  };

  return (
    <Button
      variant="outline"
      onClick={isDiscordLinked ? handleUnlinkDiscord : handleLinkDiscord}
    >
      {isDiscordLinked ? "Unlink Discord" : "Link Discord"}
      <IconBrandDiscord className="size-4" />
    </Button>
  );
}
"use client";

import { authClient } from "@/lib/auth-client";
import { Button } from "./ui/button";
import { IconBrandDiscord } from "@tabler/icons-react";
import { useRouter } from "next/navigation";

export function DiscordButton({
  isDiscordLinked,
}: {
  isDiscordLinked: boolean;
}) {
  const router = useRouter();

  const handleLinkDiscord = async () => {
    await authClient.linkSocial({
      provider: "discord",
      callbackURL: "/dashboard",
    });
  };

  const handleUnlinkDiscord = async () => {
    const status = await authClient.unlinkAccount({
      providerId: "discord",
    });

    if (status.error) {
      console.error(status.error);
    }

    router.refresh();
  };

  return (
    <Button
      variant="outline"
      onClick={isDiscordLinked ? handleUnlinkDiscord : handleLinkDiscord}
    >
      {isDiscordLinked ? "Unlink Discord" : "Link Discord"}
      <IconBrandDiscord className="size-4" />
    </Button>
  );
}
i guess this works

Did you find this page helpful?