Credentials Provider Framework Tab Issue

[AsadRazaJutt1]

What is the improvement or update you wish to see?

Framework Tab is not working well in context of specific selected tab.

Is there any context that might help us understand?

There are four frameworks: Next.js, Svelte, Qwik, and Express. However, when I click on Next.js (Client), examples from the Qwik framework are selected instead

Does the docs page already exist? Please link to it.

https://authjs.dev/getting-started/authentication/credentials

[halvaradop]

The behavior we're seeing is expected due to how the selected framework operates as an index. When you switch between frameworks, you’re updating this index, which is why you might see both Qwik and Next.js (Client) in different sections.

In my view, this approach is effective for managing the selected framework, especially since some pages may feature four frameworks while others have five. This variability could lead to conflicts in determining which framework should be displayed.

For instance, if you select Qwik, the code in both the Credentials Provider and Signin Form sections aligns correctly. However, if you then choose Next.js (Client) in the Signin Form, it raises the question: what content should be displayed in the Credentials Provider section?

This is just my opinion, and I think it would be beneficial to wait for a maintainer’s input on this matter.

[AsadRazaJutt1]

Can I resolve it and create a pull request? If you have any suggestions, I’ll keep them in mind.

[halvaradop]

I have created a pull request that adds a slugified version of the tabs, which is related to this issue. If you’d like to see it, please check PR #11951