HowToCustomize the default Login.tsx without altering authentication

Here below is the code after npx refine swizzle auth.

message.txt

7 Replies

Hi @Drick. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To customize the default Login.tsx page in Refine without altering the authentication, you need to override the existing login page. This can be done by creating a new login.tsx file in the appropriate directory (usually /pages or /src), and writing your custom code there. Here are some examples of how to override the login page for different authentication providers: 1. Auth0:

import { Layout, Button, Space, Typography } from "antd";  
import { ThemedTitleV2 } from "@refinedev/antd";  
import { useAuth0 } from "@auth0/auth0-react";  
  
export const Login: React.FC = () => {  
 const { loginWithRedirect } = useAuth0();  
  
 return (  
 <Layout  
 style={{  
 height: "100vh",  
 justifyContent: "center",  
 alignItems: "center",  
 }}  
 >  
 <Space direction="vertical" align="center" size="large">  
 <ThemedTitleV2  
 collapsed={false}  
 wrapperStyles={{  
 fontSize: "22px",  
 }}  
 />  
 <Button  
 type="primary"  
 size="middle"  
 onClick={() => loginWithRedirect()}  
 style={{ width: "240px" }}  
 >  
 Sign in  
 </Button>  
 <Typography.Text type="secondary">Powered by Auth0</Typography.Text>  
 </Space>  
 </Layout>  
 );  
};

import { Layout, Button, Space, Typography } from "antd";  
import { ThemedTitleV2 } from "@refinedev/antd";  
import { useAuth0 } from "@auth0/auth0-react";  
  
export const Login: React.FC = () => {  
 const { loginWithRedirect } = useAuth0();  
  
 return (  
 <Layout  
 style={{  
 height: "100vh",  
 justifyContent: "center",  
 alignItems: "center",  
 }}  
 >  
 <Space direction="vertical" align="center" size="large">  
 <ThemedTitleV2  
 collapsed={false}  
 wrapperStyles={{  
 fontSize: "22px",  
 }}  
 />  
 <Button  
 type="primary"  
 size="middle"  
 onClick={() => loginWithRedirect()}  
 style={{ width: "240px" }}  
 >  
 Sign in  
 </Button>  
 <Typography.Text type="secondary">Powered by Auth0</Typography.Text>  
 </Space>  
 </Layout>  
 );  
};

(Source: Auth0 Login (https://refine.dev/docs/advanced-tutorials/auth/auth0#override-login-page)) 2. Azure Active Directory B2C (AAD B2C):

import React from "react";  
import { useLogin } from "@refinedev/core";  
import { Layout, Button } from "antd";  
  
const LoginPage = () => {  
 const SignInButton = () => {  
 const { mutate: login } = useLogin();  
  
 return (  
 <Button type="primary" size="large" block onClick={() => login()}>  
 Sign in  
 </Button>  
 );  
 };  
  
 return (  
 <Layout  
 style={{  
 background: `radial-gradient(50% 50% at 50% 50%, #63386A 0%, #310438 100%)`,  
 backgroundSize: "cover",  
 }}  
 >  
 <div style={{ height: "100vh", display: "flex" }}>  
 <div style={{ maxWidth: "200px", margin: "auto" }}>  
 <div style={{ marginBottom: "28px" }}>  
 <img src="./refine.svg" alt="Refine" />  
 </div>  
 <SignInButton />  
 </div>  
 </div>  
 </Layout>  
 );  
};  
  
export default LoginPage;

import React from "react";  
import { useLogin } from "@refinedev/core";  
import { Layout, Button } from "antd";  
  
const LoginPage = () => {  
 const SignInButton = () => {  
 const { mutate: login } = useLogin();  
  
 return (  
 <Button type="primary" size="large" block onClick={() => login()}>  
 Sign in  
 </Button>  
 );  
 };  
  
 return (  
 <Layout  
 style={{  
 background: `radial-gradient(50% 50% at 50% 50%, #63386A 0%, #310438 100%)`,  
 backgroundSize: "cover",  
 }}  
 >  
 <div style={{ height: "100vh", display: "flex" }}>  
 <div style={{ maxWidth: "200px", margin: "auto" }}>  
 <div style={{ marginBottom: "28px" }}>  
 <img src="./refine.svg" alt="Refine" />  
 </div>  
 <SignInButton />  
 </div>  
 </div>  
 </Layout>  
 );  
};  
  
export default LoginPage;

(Source: Azure Active Directory B2C (AAD B2C) (https://refine.dev/docs/advanced-tutorials/auth/azure-ad#override-login-page)) Remember, the login.tsx file you create should replace the existing one. The new file will be used to render the login page, and the authentication process will remain the same as it was before. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

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

national-gold•4mo ago

To customize the default Login.tsx page in Refine without altering the authentication, you need to override the existing login page. This can be done by creating a new login.tsx, this means should be having two login.tsx files?? or replacing the existing one with the new codes from AuthO or Azure Active Directory B2C??? @kapa.ai

kapa.ai•4mo ago

Let me check the knowledge base for you. One moment! :books: Sorry @Drick, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

national-gold•4mo ago

@kapa.ai am waiting

kapa.ai•4mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- I'm sorry, but your message is not clear. Could you please provide more details or clarify your question? I'm here to help with any questions or issues you have related to Refine. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

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