Loading User Profile

[tonydattolo]

I setup a custom profile app that creates a profile for our custom user model using a 1-to-1 relationship and signals. Does a new auth action need to be setup, or can we modify load user to pass the user ID that we need to access the profile url.

for example, the ability to click the link to profile only appears when a user is logged in. do we need to pass something to the profile page for it to load?

profile url:
path('profile/<int:pk>', ProfileDetail.as_view(), name="profile")

app route:

<Route exact path='/profile' component={Profile} />

Error Given:

Unauthorized: /auth/jwt/verify/
Unauthorized: /auth/users/me/
[08/Apr/2021 04:43:20] "GET /auth/users/me/ HTTP/1.1" 401 183
[08/Apr/2021 04:43:20] "POST /auth/jwt/verify/ HTTP/1.1" 401 65

Profile Component:

const Profile = ({ isAuthenticated, load_user, verify }) => {
    
    // const [redirect, setRedirect] = useState(false);

    const guestPage = () => (
        <Fragment>
            <h3>Please login to view your profile</h3>
            <br></br>
            <Button href="/login" variant="primary">Login Page</Button>
        </Fragment>
    );

    const authPage = () => (
        <Fragment>
            <Tabs defaultActiveKey="profile" id="uncontrolled-tab-example">
                <Tab eventKey="profile" title="Profile">
                    <ProfileInfo />
                </Tab>
        
                <Tab eventKey="editProfile" title="Edit Profile">
                    <EditProfileInfo />
                </Tab>
        
                <Tab eventKey="mySpots" title="My Spots" disabled>
                    <MySpots />
                </Tab>

                <Tab eventKey="myRentals" title="My Rentals" disabled>
                    <MyRentals />
                </Tab>
            </Tabs>
        </Fragment>
    );

        return (
            <div className="profilePage mt-3">
                <Container fluid>
                    {isAuthenticated ? authPage : guestPage}
                </Container>
            </div>
        )
};
const mapStateToProps = state => ({
    isAuthenticated: state.auth.isAuthenticated
})
export default connect(mapStateToProps, { load_user,verify })(Profile);