extended-yellow
extended-yellow11mo 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
kapa.ai11mo 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
kapa.ai11mo ago
<@825356391027834901> kapa.ai is still learning and improving, please let us how it did by reacting below
extended-yellow
extended-yellow11mo ago
@kapa.ai Where to put google client id for Google OAuth provider?
kapa.ai
kapa.ai11mo 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
kapa.ai11mo ago
<@825356391027834901> kapa.ai is still learning and improving, please let us how it did by reacting below