How to add Google OAuth as Provider
I can see
providers
in Login Page but there is no where i can find implementation of defination of that maybe it will be list of objects!5 Replies
Hi @react_webapps. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Yes, you're correct. The
providers
property in the AuthPage
component is used to define the list of providers for handling login authentication. It accepts an array of Provider
type. This property is only available for login
and register
types.
Here's an example of how you can define it:
In this example, two providers are defined: GitHub and Google. Each provider is an object with name
, icon
, and label
properties.
For more information, you can refer to the documentation here (https://refine.dev/docs/api-reference/core/components/auth-page).
----------------------
Note: you can ask me a follow up question by @ mentioning me again
:speech_balloon:
----------------------<@825356391027834901> kapa.ai is still learning and improving, please let us how it did by reacting below
stormy-gold•15mo ago
@kapa.ai Where to put google client id for Google OAuth provider?
Let me check the knowledge base for you. One moment! :books:
----------------------
To use Google OAuth provider, you need to store your Google Client ID and Client Secret in your environment variables. You can do this by creating a
.env.local
file in the root level of your app folder. Inside this file, you will create GOOGLE_CLIENT_ID
and GOOGLE_CLIENT_SECRET
environment variables and assign the OAuth client values you got from Google.
Here's an example of how your .env.local
file should look like:
Replace YOUR_CLIENT_ID
and YOUR_CLIENT_SECRET
with your actual Google Client ID and Client Secret.
For more details, you can refer to this blog post (https://refine.dev/blog/nextauth-google-github-authentication-nextjs).
----------------------
Note: you can ask me a follow up question by @ mentioning me again
:speech_balloon:
----------------------<@825356391027834901> kapa.ai is still learning and improving, please let us how it did by reacting below