Hello, I'm currently facing a challenge while working with dynamic routes in Next.js. The file in question is named [type].js, and it contains the following code:
import React from 'react';
import AuthSection from 'components/AuthSection';
import { useRouter } from 'next/router';
import { useAuth } from "../../util/auth";
function AuthPage(props) {
const router = useRouter();
const auth = useAuth();
let getAuthRoles = auth.user ? auth.user.roles[0] : ""
let pageSrc = ""
if(getAuthRoles === "Moderation Staff"){
pageSrc = "/moderation"
}else if(getAuthRoles === "Super Admin"){
pageSrc = "/superUser"
}
return (
<AuthSection
bgColor="default"
size="medium"
bgImage=""
bgImageOpacity={1}
type={router.query.type}
afterAuthPath={router.query.next || `${pageSrc}`}
/>
);
}
- Extracting authorization roles from Auth0.
- Using a ternary condition to fetch user roles for processing and transmission.
- A conditional statement that redirects users based on their assigned roles.
- A component generating the sign-in route, utilizing page routing logic.
If I utilize the snippet below:
return (
<AuthSection
bgColor="default"
size="medium"
bgImage=""
bgImageOpacity={1}
type={router.query.type}
afterAuthPath={router.query.next || '/moderation'}
/>
);
This works flawlessly, but it does not meet my requirements.
Essentially, I need the application to dynamically redirect users to specific pages based on their roles. From my Javascript perspective, incorporating a dynamic route into the afterAuthPath seems logical. However, this approach results in an error like the one shown here:
https://i.sstatic.net/9NUWa.png
Upon consulting the documentation, I realized it primarily explains the usage of href, which is not applicable in my case.
How can I address this issue? I'm currently at a loss for alternative solutions and would greatly appreciate your assistance!
EDIT: Below is the code for my AuthSection.js component:
import React from "react";
import Section from "components/Section";
import Container from "@material-ui/core/Container";
import SectionHeader from "components/SectionHeader";
import Auth from "components/Auth";
function AuthSection(props) {
// Configuration values for each authentication type
const allTypeValues = {
signin: {
title: "Welcome back",
buttonText: "Sign in",
linkTextSignup: "Create an account",
linkTextForgotpass: "Forgot Password?",
},
signup: {
title: "Get yourself an account",
buttonText: "Sign up",
linkTextSignin: "Sign in",
},
forgotpass: {
title: "Get a new password",
buttonText: "Reset password",
},
changepass: {
title: "Choose a new password",
buttonText: "Change password",
},
};
// Validating the current authentication type
const currentType = allTypeValues[props.type] ? props.type : "signup";
// Retrieving values for the current authentication type
const typeValues = allTypeValues[currentType];
return (
<Section
bgColor={props.bgColor}
size={props.size}
bgImage={props.bgImage}
bgImageOpacity={props.bgImageOpacity}
>
<Container maxWidth="xs">
<SectionHeader
title={allTypeValues[currentType].title}
subtitle=""
size={4}
textAlign="center"
/>
<Auth
type={currentType}
typeValues={typeValues}
providers={props.providers}
afterAuthPath={props.afterAuthPath}
key={currentType}
/>
</Container>
</Section>
);
}
export default AuthSection;
UPDATE - Revised Code
import React, { useEffect, useState } from "react";
import AuthSection from 'components/AuthSection';
import { useRouter } from 'next/router';
import { useAuth } from "../../util/auth";
function AuthPage(props) {
const router = useRouter();
const auth = useAuth();
const [pageSrc, setPageSrc] = useState("");
useEffect(() => {
const getAuthRoles = auth.user ? auth.user.roles[0] : "";
let newPageSrc = "";
if(getAuthRoles === "Moderation Staff"){
newPageSrc = "/moderation"
} else if(getAuthRoles === "Super Admin"){
newPageSrc = "/superUser"
}
setPageSrc(newPageSrc);
}, [auth]);
return (
<AuthSection
bgColor="default"
size="medium"
bgImage=""
bgImageOpacity={1}
type={router.query.type}
afterAuthPath={router.query.next || `${pageSrc}`}
/>
);
}