How to setup with multiple providers?

[imjlk]

https://blog.otterlord.dev/post/authjs-astro/

I did simply one based on the above link, and it looks like setting up an additional provider overwrites the SignIn component with the last one.

---
import Layout from '../layouts/Layout.astro';
import type { Session } from '@auth/core/types';
import { Auth, SignIn, SignOut } from 'auth-astro/components';
import { authOpts } from './api/auth/[...astroAuth]';
---

<Layout title="Welcome to Astro Auth">
  <Auth authOpts={authOpts}>
    {
      (session: Session | null) => 
      <main>
        <h1>Astro + AuthJS</h1>
        <p>
          <a href="/protected">Protected Route</a>
        </p>
        {
          session === null
          ? <>
              <SignIn provider="github">Login</SignIn> // when it click, it's working with kakao provider
              <SignIn provider="kakao">Login with Kakao</SignIn> // not working
            </>
          : <SignOut>Logout</SignOut>
        }
        <p>
          {session ? `Logged in as ${session.user?.name}` : 'Not logged in'}
        </p>
      </main>
    }
  </Auth>
</Layout>

I haven't tested it with other providers yet, could it be a problem that it's imported from the next-auth library? like below,

...
import KakaoProvider from "next-auth/providers/kakao"
...

[TheOtterlord]

We have a fix for this, but it seems it's not been published yet. I'll see if I can get this pushed soon.

[imjlk]

Great, I hope to integrate with auth.js soon.

[nowaythatworked]

@imjlk The new version 1.0.6 was just published. Please install it and let us know if your problem is fixed.

[imjlk]

Thanks, it's working well.