0
117
Viewsnot able to receive data in providers
I am trying to make a login page using nextjs and spotify js but encountering following error
Below is the following code
import React from 'react'
import { getProviders , signIn } from "next-auth/react"
function Login({ providers }) {
return (
<div>
{Object.keys(providers).map((provider) => {
<button>Login With {provider.name}</button>
})}
</div>
)
}
export default Login;
export async function getServerSideProps() {
const providers = await getProviders()
return {
props : {
providers,
}
}
}
AND below is the code for providers in [...nextauth].js
export default NextAuth({
// Configure one or more authentication providers
providers: [
SpotifyProvider({
clientId: process.env.NEXT_PUBLIC_CLIENT_ID,
clientSecret: process.env.NEXT_PUBLIC_CLIENT_SECRET,
authorization: LOGIN_URL,
}),
// ...add more providers here
],
})
3 answers
Answer question0
How I see it:
import React from 'react'
import { getProviders , signIn } from "next-auth/react"
function Login({ providers }) {
return (
<div>
{providers.map((provider) => {
<button>Login With {provider.name}</button>
})}
</div>
)
}
export default Login;
export async function getServerSideProps() {
const providers = await getProviders()
//check if you have some data here
console.log(providers)
return {
props : {
providers: providers,
}
}
}
0
Make sure your nextjs api pointed to current hosting URL. For example : http://localhost:3000. Otherwise it will not work!
0
I'm guessing that either you didn't get any providers or your providers object is undefined on initial render. You can use Object.keys(providers || {}) instead to make sure it's always an object.
Also, Object.keys returns a string array of keys on the object meaning that the provider will be a string and won't have a name property. If you're iterating over the Object.keys you would need to use providers[provider].name instead of provider.name