CODEWITHSUNDEEP
reactjslaravel
Shehban Patel
Shehban Patel

Reputation: 65

How do I check if user is 'logged in' in a react component when using laravel authentication?

I have setup laravel authentication in my website. It works very well but I want to know how I can check if a user is logged in when inside a react component and display his/her specific content.

Upvotes: 5

Views: 2683

Answers (1)

ajthinking
ajthinking

Reputation: 4538

One approach I have used to solve the problem with checking if the user is logged in is to attach it in your main blade file as 'global data'. First set up your controller.

public function index()
{        
    return view('welcome')->with(["globalData" => collect([
        'user' => Auth::user()
    ]);
}

Then in your root blade file

<script>
    let globalData = "{!! $globalData->toJson() !!}";
</script>

Then you can access a user property anywhere in your components by refering to globalData.user and thus test if user is an object or null/empty.

Example from a React project with version 15.4.2

Controller

class GuiController extends Controller
{
    public function __construct() {
        $this->data = [
            'projects' => $this->projects(), 
            'packs' => Pack::all(),
            'stimpack_io_token' => env('STIMPACK_IO_TOKEN'),
            'stimpack_data_url' => env('STIMPACK_DATA_URL'),
            'manipulatorData' => ManipulatorController::attachStartupData()
        ];
    }

    public function index()
    {        
        return view('welcome')->with(["data" => collect($this->data)]);
    }

View

<body>            
    <div id="main"></div>
    <script>
        let data = {!! $data->toJson() !!};
    </script>
    <script src="{{asset('js/app.js')}}" ></script>                
</body>

Usage inside component

upload() {
    var compiler = new Compiler(this.props.engine);
    var compiled = compiler.compile();
    $.ajax({
        type: "POST",
        beforeSend: function(request) {
            request.setRequestHeader("stimpack-io-token", data.stimpack_io_token);
        },

Upvotes: 4

Related Questions