User Authetication In Frappe-react-sdk

Frappe Framework Website
, ,
1

Hey community,
I have created a login page using Frappe-React-SDK. after login, the page is redirect to the dashboard, where im getting a permission error
frappe.exceptions.PermissionError: You are not permitted to access this resource.Function research_app.research.doctype.exam.exam-api.all_exams

how can i pass the session id or the logged in user details to the dashboard page?

login.tsx

import { Box, Button, Card, Flex, Heading, Text, TextField, Callout} from "@radix-ui/themes";
import { InfoCircledIcon } from "@radix-ui/react-icons";
import '@radix-ui/themes/styles.css';
import './login.css'
import { useFrappeAuth } from "frappe-react-sdk";
import { useState } from "react";


const Login = () => {
    
    const [ username, setUsername ] = useState<string>('')
    const [ password, setPassword ] = useState<string>('')

    const [ loginError, setLoginError ] = useState<any>('');


    const { currentUser, login, error, isLoading } = useFrappeAuth()
    
    const onLogin = () => {
        login({
            username,
            password
        }).then((res) =>{
            console.log(res)
            setLoginError(undefined)
            navigate('/dashboard');
        }).catch((err) =>{
            setLoginError(err)
        })
    }

    return (
        <div>
            <Flex align='center' justify='center' className="w-screen h-screen">
                <Card className="w-[30vw] min-h-80 p-2">
                    <Flex direction='column' gap='2'>
                        <Heading align='center'>Login</Heading>
                        { loginError ?
                            <Callout.Root color="red">
                                <Callout.Icon>
                                    <InfoCircledIcon />
                                </Callout.Icon>
                                <Callout.Text>
                                    Username or Password Error
                                </Callout.Text>
                            </Callout.Root>
                         : null
                        }
                        <Box>
                            <Text as="label"> Username/Email</Text>
                            <TextField.Root placeholder="Username" onChange={(e) => setUsername(e.target.value)} value={username} />
                        </Box>
                        <Box>
                            <Text as="label">Password</Text>
                            <TextField.Root type="password" placeholder="Password" onChange={(e) => setPassword(e.target.value)} value={password}/>
                        </Box>

                        <Button onClick={onLogin} disabled={isLoading}>Login</Button>
                    </Flex>
                </Card>
            </Flex>
        </div>
    )
}
export default Login;

dashboard.tsx

import { useState } from "react";
import './dashboard.css'
import { FrappeProvider } from "frappe-react-sdk";
import Sidebar from "../components/sidebar/Sidebar";
import LeftContentArea from "../components/content/LeftConententArea";
import RightContentArea from "../components/content/RightContentArea";

const Dashboard = () => {
  const [isNavCollapsed, setIsNavCollapsed] = useState(false);
  const [selectedMenuOption, setSelectedMenuOption] = useState('');
  const [selectedContent, setSelectedContent] = useState('');

  const handleMenuClick = (menuOption: any) => {
    setSelectedMenuOption(menuOption);
  }

  const handleContentClick = (examName: any) => {
    setSelectedContent(examName);
  }

  return (
    <div className="app">
      <FrappeProvider>
        <Sidebar isNavCollapsed={isNavCollapsed}
                 setIsNavCollapsed={setIsNavCollapsed}
                 selectedMenuOption={selectedMenuOption}
                 setSelectedMenuOption={setSelectedMenuOption}
                 handleMenuClick={handleMenuClick} 
        />

        <div className="main">
          <LeftContentArea 
            selectedMenuOption={selectedMenuOption}
            handleMenuClick={handleMenuClick}
            handleContentClick={handleContentClick} 
          >
            <p><span></span></p>
          </LeftContentArea>
          <RightContentArea 
            selectedMenuOption={selectedMenuOption} 
            handleMenuClick={handleMenuClick} 
            selectedContent={selectedContent}
            handleContentClick={handleContentClick} 
          >
            <p><span></span></p>
          </RightContentArea>
        </div>
      </FrappeProvider>
    </div>
  )
}

export default Dashboard;