continuing-cyan
continuing-cyan10mo 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
kapa.ai10mo 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
kapa.ai10mo ago
<@175705884045869056> kapa.ai is still learning and improving, please let us know how it did by reacting below
continuing-cyan
continuing-cyan10mo ago
This is the error I get: