other-emerald
other-emerald4mo ago

HowToCustomize the default Login.tsx without altering authentication

Here below is the code after npx refine swizzle auth.
7 Replies
kapa.ai
kapa.ai4mo ago
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
kapa.ai4mo ago
<@1062024816858779688> kapa.ai is still learning and improving, please let us know how it did by reacting below
other-emerald
other-emerald4mo 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
kapa.ai4mo 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?
other-emerald
other-emerald4mo ago
@kapa.ai am waiting
kapa.ai
kapa.ai4mo 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
kapa.ai4mo ago
<@1062024816858779688> kapa.ai is still learning and improving, please let us know how it did by reacting below