equal-aqua•2y ago

Is that possible to implement more than one auth provider?

Is that possible to implement more than one auth provider? At the moment i have only google authentication. But I would also like to implement the authentication where the user can register with a username and a password.

7 Replies

kapa.ai•2y ago

Hi @ging_freecs. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

kapa.ai•2y ago

---------------------- Yes, it is possible to implement more than one authentication method in your refine application. You can have Google authentication along with email and password-based authentication. You'll need to modify your authProvider to handle both methods. In the authProvider example (https://refine.dev/blog/refine-pixels-2#<Refine />'s authProvider Prop) provided in the extracts, you can see that it already handles email and password-based authentication. You can extend this example to include Google authentication as well. To add Google authentication, you can follow the example from the NextAuth Google and GitHub authentication (https://refine.dev/blog/nextauth-google-github-authentication-nextjs) extract. Although the example is for Next.js, you can adapt the logic for your refine application. In your authProvider, you'll need to add a new case for Google authentication in the login method. You can use a third-party library or your custom implementation to handle the Google authentication process. Here's a modified version of the authProvider example that includes a placeholder for Google authentication:

import { AuthProvider } from "@refinedev/core";
import { supabaseClient } from "utility";

export const authProvider: AuthProvider = {
  login: async ({ email, password, providerName }) => {
    // sign in with Google
    if (providerName === "google") {
      // Add your Google authentication logic here
    }

    // sign in with email and password
    const { data, error } = await supabaseClient.auth.signInWithPassword({
      email,
      password,
    });

    if (error) {
      return Promise.reject(error);
    }

    if (data?.user) {
      return Promise.resolve();
    }

    return Promise.resolve();
  },
  // ... other methods
};

import { AuthProvider } from "@refinedev/core";
import { supabaseClient } from "utility";

export const authProvider: AuthProvider = {
  login: async ({ email, password, providerName }) => {
    // sign in with Google
    if (providerName === "google") {
      // Add your Google authentication logic here
    }

    // sign in with email and password
    const { data, error } = await supabaseClient.auth.signInWithPassword({
      email,
      password,
    });

    if (error) {
      return Promise.reject(error);
    }

    if (data?.user) {
      return Promise.resolve();
    }

    return Promise.resolve();
  },
  // ... other methods
};

NextAuth - Google And GitHub Authentications for Nextjs | refine

How to implement Google and GitHub authentications using NextAuth.js in Next.js?

Setting Up the Client App | refine

We'll initialize our Pixels app using refine and get familiar with the boilerplate code to be created with the create refine-app CLI tool.

kapa.ai•2y ago

Remember to replace the placeholder with your actual Google authentication logic. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

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

optimistic-gold•2y ago

Hello @ging_freecs , was the answer you got from bot sufficient, or do you need and follow-up?

equal-aquaOP•2y ago

Hi, i would like a follow up. i don't know how to implement more than one

optimistic-gold•2y ago

Hello @ging_freecs You can pass extra providers like seen here: https://refine.dev/docs/api-reference/mui/components/mui-auth-page/#providers ANd as bot mentioned, you can have condition inside auth provider,

 login: async ({ email, password, providerName }) => {
    // sign in with Google
    if (providerName === "google") {
      // Add your Google authentication logic here
    }
    ....

 login: async ({ email, password, providerName }) => {
    // sign in with Google
    if (providerName === "google") {
      // Add your Google authentication logic here
    }
    ....

| refine

component from refine is an authentication page that can be used to login, register, forgot password, and update password.

Is that possible to implement more than one auth provider?

Did you find this page helpful?