How to make the NextAuth custom signin page typesafe?

Hi all! I am trying to make the custom signin page described here: https://next-auth.js.org/configuration/pages In a typesafe way, but I only get it worked with suppressing a lot of eslint warnings, which I don't want to do. Does anyone has an example of how to do this in the proper way? The errors I get are: * "Unsafe assignment of an any value" * "Unsafe member access .id on an any value" Found this thread related to it, but still couldn't get it working: https://github.com/nextauthjs/next-auth/issues/834 Greateful for advise and my apology in advance for this nooby question
Pages | NextAuth.js
NextAuth.js automatically creates simple, unbranded authentication pages for handling Sign in, Sign out, Email Verification and displaying error messages.
GitHub
Custom Sign In Page with Typescript doesn't work · Issue #834 · nex...
Describe the bug Getting a TypeError: Cannot convert undefined or null to object when adding a custom sign in page under /api/auth/signin. This is because export default function SignIn({ providers...
10 Replies
Unknown User
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
peternovak
peternovak2y ago
Thanks @Luka Hietala , I was thinking so too, but this one didn't work and I still got the same errors
vae
vae2y ago
interface SignInProps {
    providersProvider[];
}

const SignIn = ({ providers }SignInProps=> {
interface SignInProps {
    providersProvider[];
}

const SignIn = ({ providers }SignInProps=> {
That's what I've used and the types work fine
peternovak
peternovak2y ago
Great, thanks a lot @ꨄJolt , that did the trick!!
peternovak
peternovak2y ago
Posting my working code here just in case anyone would see this question and be interested in the solution:
vae
vae2y ago
No worries 🙂 happy to help 👍 Fyi you could've replaced Provider Here with Provider[] as well if you prefer that way of defining the types!
Unknown User
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
ygor perez
ygor perez2y ago
I copied this code and it isn't working for me, if turn off SSR or remove the custom sign in page everything works normally
ygor perez
ygor perez2y ago
I'm new to this stack, sorry if there's something basic that I'm not getting, I would be really glad if someone could explain it to me why it's not working with SSR nvm it seems that it magically solved itself after deleting cache and restarting the dev server the error came back help error - TypeError: Cannot convert undefined or null to object at Function.values (<anonymous>) at SignIn (webpack-internal:///./src/pages/auth/signin.tsx:24:30) at renderWithHooks (webpack-internal:///./node_modules/.pnpm/[email protected][email protected]/node_modules/react-ssr-prepass/dist/react-ssr- I ended up disabling sSSR in the trpc config and now I'm using ssgHelpers
vae
vae2y ago
Ah okay
Want results from more Discord servers?
Add your server