deep-jade•7mo ago

Mern Dashboard Client change Auth from Google to Auth0

Hi There. I am still new to Javascript/Typescript/ react and everything. Refine has been a great starting point to learn. But now I want to change the Auth from Google to Auth0 in order for me to add Microsoft Auth. What and where do I need to change? ANy help would be great thanx

3 Replies

kapa.ai•7mo ago

Hi @surgicalfiend. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To change the authentication from Google to Auth0 in your Refine application, you need to follow these steps: 1. Install the Auth0 React SDK: You can do this by running the following command in your project directory:

npm install @auth0/auth0-react

npm install @auth0/auth0-react

(Source: refine.dev/docs/advanced-tutorials/auth/auth0 (https://refine.dev/docs/advanced-tutorials/auth/auth0)) 2. Configure the Auth0Provider component: You need to wrap your root component with an Auth0Provider that you can import from the SDK. You can do this in your index.tsx file:

import React from "react";  
import { createRoot } from "react-dom/client";  
import { Auth0Provider } from "@auth0/auth0-react";  
import App from "./App";  

const container = document.getElementById("root");  
const root = createRoot(container!);  
root.render(  
 <React.StrictMode>  
 <Auth0Provider  
 domain={process.env.REACT_APP_AUTH0_DOMAIN as string}  
 clientId={process.env.REACT_APP_AUTH0_CLIENT_ID as string}  
 redirectUri={window.location.origin}  
 >  
 <App />  
 </Auth0Provider>  
 </React.StrictMode>,  
);

import React from "react";  
import { createRoot } from "react-dom/client";  
import { Auth0Provider } from "@auth0/auth0-react";  
import App from "./App";  

const container = document.getElementById("root");  
const root = createRoot(container!);  
root.render(  
 <React.StrictMode>  
 <Auth0Provider  
 domain={process.env.REACT_APP_AUTH0_DOMAIN as string}  
 clientId={process.env.REACT_APP_AUTH0_CLIENT_ID as string}  
 redirectUri={window.location.origin}  
 >  
 <App />  
 </Auth0Provider>  
 </React.StrictMode>,  
);

(Source: refine.dev/blog/refine-vs-redwood-js#refine-6 (https://refine.dev/blog/refine-vs-redwood-js#refine-6)) 3. Create an Auth Provider: In Refine, authentication and authorization processes are performed with the auth provider. You need to write a provider for Auth0. You can do this in your App.tsx file:

import { Refine, AuthBindings, Authenticated } from "@refinedev/core";  
import { ThemedLayoutV2, ReadyPage, notificationProvider, ErrorComponent, RefineThemes } from "@refinedev/antd";  
import dataProvider from "@refinedev/simple-rest";  
import routerProvider, { NavigateToResource, CatchAllNavigate } from "@refinedev/react-router-v6";  
import { useAuth0 } from "@auth0/auth0-react";
const App = () => {  
 const { isLoading, isAuthenticated, user, logout, getIdTokenClaims } = useAuth0();  

 const authProvider: AuthBindings = {  
 login: async () => {  
 return {  
 success: true,  
 };  
 },  
 logout: async () => {  
 logout({ returnTo: window.location.origin });  
 return {  
 success: true,  
 };  
 },  
 onError: async (error) => {  
 console.error(error);  
 return { error };  
 },  
 check: async () => {  
 try {  
 const token = await getIdTokenClaims();  
 if (token) {  
 axios.defaults.headers.common = {  
 Authorization: `Bearer ${token.__raw}`,  
 };  
 return {  
 authenticated: true,  
 };  
 } else {  
 return {  
 authenticated: false,  
 error: {  
 message: "Check failed",  
 name: "Token not found",  
 },  
 redirectTo: "/login",  
 logout: true,  
 };  
 }  
 } catch (error: any) {  
 return {  
 authenticated: false,  
 error: new Error(error),  
 redirectTo: "/login",  
 logout: true,  
 };  
 }  
 },  
 getPermissions: async () => null,  
 getIdentity: async () => {  
 if (user) {  
 return {  
 ...user,  
 avatar: user.picture,  
 };  
 }

import { Refine, AuthBindings, Authenticated } from "@refinedev/core";  
import { ThemedLayoutV2, ReadyPage, notificationProvider, ErrorComponent, RefineThemes } from "@refinedev/antd";  
import dataProvider from "@refinedev/simple-rest";  
import routerProvider, { NavigateToResource, CatchAllNavigate } from "@refinedev/react-router-v6";  
import { useAuth0 } from "@auth0/auth0-react";
const App = () => {  
 const { isLoading, isAuthenticated, user, logout, getIdTokenClaims } = useAuth0();  

 const authProvider: AuthBindings = {  
 login: async () => {  
 return {  
 success: true,  
 };  
 },  
 logout: async () => {  
 logout({ returnTo: window.location.origin });  
 return {  
 success: true,  
 };  
 },  
 onError: async (error) => {  
 console.error(error);  
 return { error };  
 },  
 check: async () => {  
 try {  
 const token = await getIdTokenClaims();  
 if (token) {  
 axios.defaults.headers.common = {  
 Authorization: `Bearer ${token.__raw}`,  
 };  
 return {  
 authenticated: true,  
 };  
 } else {  
 return {  
 authenticated: false,  
 error: {  
 message: "Check failed",  
 name: "Token not found",  
 },  
 redirectTo: "/login",  
 logout: true,  
 };  
 }  
 } catch (error: any) {  
 return {  
 authenticated: false,  
 error: new Error(error),  
 redirectTo: "/login",  
 logout: true,  
 };  
 }  
 },  
 getPermissions: async () => null,  
 getIdentity: async () => {  
 if (user) {  
 return {  
 ...user,  
 avatar: user.picture,  
 };  
 }

(Source: [refine.dev/docs/advanced-tutorials/auth/auth0#auth-provider](https://refine.dev/docs/advanced-tutorials ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

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

deep-jade•7mo ago

This is the error I get:

message.txt