passive-yellow•16mo 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•16mo 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•16mo 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•16mo 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•16mo ago

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

harsh-harlequin•16mo ago

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

passive-yellow•16mo ago

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

harsh-harlequin•16mo 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.