equal-aqua•2y ago

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

kapa.ai•2y ago

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:

const LoginPage = () => {  
 return (  
 <AuthPage  
 providers={[  
 {  
 name: "github",  
 icon: <svg>{/* ... */}</svg>,  
 label: "Sign in with GitHub",  
 },  
 {  
 name: "google",  
 icon: <svg>{/* ... */}</svg>,  
 label: "Sign in with Google",  
 },  
 ]}  
 />  
 );  
};

const LoginPage = () => {  
 return (  
 <AuthPage  
 providers={[  
 {  
 name: "github",  
 icon: <svg>{/* ... */}</svg>,  
 label: "Sign in with GitHub",  
 },  
 {  
 name: "google",  
 icon: <svg>{/* ... */}</svg>,  
 label: "Sign in with Google",  
 },  
 ]}  
 />  
 );  
};

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: ----------------------

kapa.ai•2y ago

<@825356391027834901> kapa.ai is still learning and improving, please let us how it did by reacting below

equal-aquaOP•2y ago

@kapa.ai Where to put google client id for Google OAuth provider?

kapa.ai•2y ago

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:

GOOGLE_CLIENT_ID=YOUR_CLIENT_ID  
GOOGLE_CLIENT_SECRET=YOUR_CLIENT_SECRET  
NEXTAUTH_URL=<http://localhost:3000>  
NEXTAUTH_SECRET=YOUR_SECRET

GOOGLE_CLIENT_ID=YOUR_CLIENT_ID  
GOOGLE_CLIENT_SECRET=YOUR_CLIENT_SECRET  
NEXTAUTH_URL=<http://localhost:3000>  
NEXTAUTH_SECRET=YOUR_SECRET

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: ----------------------

kapa.ai•2y ago

<@825356391027834901> kapa.ai is still learning and improving, please let us how it did by reacting below