React Admin Sign up page can't access

Viewed 10

I have created a custom sign up page that i am trying to access from a custom login screen. I am using the firebase connecters for authProvider. How can I allow the page to go to the sign up page without being authenticated?

Here is the app.tsx:

function App() {
  return (
    <Admin
      authProvider={firebaseAuthProvider}
      dataProvider={firebaseDataProvider}
      i18nProvider={i18nProvider}
      loginPage={LoginPage}
    >
      <Resource name="researchers" list={ListGuesser} />
      <CustomRoutes noLayout>
        <Route path="/signup" element={<SignUpPage />} />
      </CustomRoutes>
    </Admin>
  );
}

And the login page:

import React from "react";
import {
  Stack,
  Card,
  CardContent,
  Typography,
  TextField,
  Button,
  Link,
} from "@mui/material";
import { Title, useTranslate } from "react-admin";

export const LoginPage = () => {
  const t = useTranslate();

  const handleSubmit = () => {};

  return (
    <Card>
      <Title title="Sign Up!" />
      <CardContent>
        <Stack>
          <Stack alignItems="center">
            <Typography>{t("login.login")}</Typography>
          </Stack>
          <Stack component="form" onSubmit={handleSubmit}>
            <TextField
              margin="normal"
              required
              fullWidth
              id="email"
              label={t("email")}
              name="email"
              autoComplete="email"
              autoFocus
            />
            <TextField
              margin="normal"
              required
              fullWidth
              name="password"
              label={t("password")}
              type="password"
              id="password"
              autoComplete="current-password"
            />
            <Button
              type="submit"
              fullWidth
              variant="contained"
              sx={{ mt: 3, mb: 2 }}
            >
              {t("login.signin")}
            </Button>
          </Stack>
          <Typography>{t("login.or")}</Typography>
          <Link href="/signup">{t("signup.signup")}</Link>
        </Stack>
      </CardContent>
    </Card>
  );
};

The link on the login page is where the problem is.

0 Answers
Related