How to access Django session in React

Question

If I am using Django REST framework for session authentication

https://www.django-rest-framework.org/api-guide/authentication/

And React on the frontend, I am wondering how I can determine if I my session is active in Django in React? I'm assuming that the session is implemented via setting a cookie in the clients browser, so that every time a request is sent from the client it will have this cookie in the header, which Django automatically reads from. If this is the case, what is the best way to access this cookie? Or rather, what is the ideal way to check if a user is still authenticated directly? Right now I can send a request to an endpoint and if I am not authenticated, it will throw a 403 error, but this is not an elegant way to check logged in status on the frontend, in my opinion.

Is the Django application being served from a different domain to your react app? — Iain Shelvington
– Iain Shelvington, Commented Dec 30, 2019 at 0:01
@IainShelvington same domain, Django is actually serving the react app in my root path '/'. — Davis Owen
– Davis Owen, Commented Dec 30, 2019 at 0:03
Where would you like to check for the user being authenticated in your react app? What is wrong with handling 403 responses and directing the user to authenticate again? — Iain Shelvington
– Iain Shelvington, Commented Dec 30, 2019 at 0:11
@IainShelvington My only issue with checking for 403 responses is that it isn't verbose enough. I can't think of any but I'm assuming there could be situations in the future where 403 could be returned for reasons other than not being authenticated. Also I think in the situation that a user opens the app and is not authenticated anymore, that react could check the backend on load if they're authenticated or not as opposed to waiting until the user makes a request manually. But I suppose it isnt the end of the world. — Davis Owen
– Davis Owen, Commented Dec 30, 2019 at 0:16
The issues you have with using something like the session cookie to determine if the user is logged in are 1) even anonymous users (not logged in) get a session cookie and 2) even if the cookie is present it may not be valid anymore — Iain Shelvington
– Iain Shelvington, Commented Dec 30, 2019 at 0:22

Mukul Kumar · Accepted Answer · 2019-12-30 04:37:37Z

2

# You can check in the constructor of your component whether the token is set or not. If not, redirect the page to login page. And remove the token in the logout component.

# For example

admin.js

import React, { Component } from 'react'
import { Link, Redirect } from 'react-router-dom';

export default class Admin extends Component {
    constructor(props) {
        super(props)
        const token = localStorage.getItem("token")

        let loggedIn = true

        if (token == null) {
            loggedIn = false
        }

        this.state = {
            loggedIn
        }
    }

    render() {
        if(this.state.loggedIn === false){
            return <Redirect to="/" />
        }
        return (
            <div>
                <h1>This is an Admin Page. Only Auth people can see this.</h1>
                <Link to="/logout">Logout</Link>
            </div>
        )
    }
}


logout.js

import React, { Component } from 'react'
import { Link } from 'react-router-dom';

export default class Logout extends Component {
    constructor(props){
        super(props)
        localStorage.removeItem("token")
    }
    render() {
        return (
            <div>
                <h1>You have been logged out!!!</h1>
                <Link to="/">Login again</Link>
            </div>
        )
    }
}

answered Dec 30, 2019 at 4:37

Mukul Kumar

2,1031 gold badge10 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

lbris Over a year ago

The cookies are in the Storage/Cookies section. By accessing localStorage you can access to cookies ?

Collectives™ on Stack Overflow

How to access Django session in React

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related