update: seperate routes for login and signup added

app/src/pages/login.tsx

@@ -1,10 +1,82 @@
-import React, { Fragment } from 'react';
-import { Authorizer } from '@authorizerdev/authorizer-react';
+import React, { Fragment, useState } from 'react';
+import {
+	AuthorizerBasicAuthLogin,
+	AuthorizerForgotPassword,
+	AuthorizerMagicLinkLogin,
+	AuthorizerSocialLogin,
+	useAuthorizer,
+} from '@authorizerdev/authorizer-react';
+import styled from 'styled-components';
+import { Link } from 'react-router-dom';
 
-export default function Login() {
+const enum VIEW_TYPES {
+	LOGIN = 'login',
+	FORGOT_PASSWORD = 'forgot-password',
+}
+
+const Footer = styled.div`
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	margin-top: 15px;
+`;
+
+const FooterContent = styled.div`
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	margin-top: 10px;
+`;
+
+export default function Login({ urlProps }: { urlProps: Record<string, any> }) {
+	const { config } = useAuthorizer();
+	const [view, setView] = useState<VIEW_TYPES>(VIEW_TYPES.LOGIN);
 	return (
 		<Fragment>
-			<Authorizer />
+			{view === VIEW_TYPES.LOGIN && (
+				<Fragment>
+					<h1 style={{ textAlign: 'center' }}>Login</h1>
+					<br />
+					<AuthorizerSocialLogin urlProps={urlProps} />
+					{config.is_basic_authentication_enabled &&
+						!config.is_magic_link_login_enabled && (
+							<AuthorizerBasicAuthLogin urlProps={urlProps} />
+						)}
+					{config.is_magic_link_login_enabled && (
+						<AuthorizerMagicLinkLogin urlProps={urlProps} />
+					)}
+					<Footer>
+						<Link
+							to="#"
+							onClick={() => setView(VIEW_TYPES.FORGOT_PASSWORD)}
+							style={{ marginBottom: 10 }}
+						>
+							Forgot Password?
+						</Link>
+					</Footer>
+				</Fragment>
+			)}
+			{view === VIEW_TYPES.FORGOT_PASSWORD && (
+				<Fragment>
+					<h1 style={{ textAlign: 'center' }}>Forgot Password</h1>
+					<AuthorizerForgotPassword urlProps={urlProps} />
+					<Footer>
+						<Link
+							to="#"
+							onClick={() => setView(VIEW_TYPES.LOGIN)}
+							style={{ marginBottom: 10 }}
+						>
+							Back
+						</Link>
+					</Footer>
+				</Fragment>
+			)}
+			{config.is_sign_up_enabled && (
+				<FooterContent>
+					Don't have an account? <Link to="/app/signup"> Sign Up</Link>
+				</FooterContent>
+			)}
 		</Fragment>
 	);
 }

app/src/pages/signup.tsx

@@ -0,0 +1,28 @@
+import React, { Fragment } from 'react';
+import { AuthorizerSignup } from '@authorizerdev/authorizer-react';
+import styled from 'styled-components';
+import { Link } from 'react-router-dom';
+
+const FooterContent = styled.div`
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	margin-top: 20px;
+`;
+
+export default function SignUp({
+	urlProps,
+}: {
+	urlProps: Record<string, any>;
+}) {
+	return (
+		<Fragment>
+			<h1 style={{ textAlign: 'center' }}>Sign Up</h1>
+			<br />
+			<AuthorizerSignup urlProps={urlProps} />
+			<FooterContent>
+				Already have an account? <Link to="/app"> Login</Link>
+			</FooterContent>
+		</Fragment>
+	);
+}