How to create separate Blade views for authenticated and guest users in livewire

To create a profile page that displays different content based on whether the user is authenticated or not, and to use the same URL for both authenticated and guest users, you can use Laravel Livewire combined with Blade templates. Here's how you can achieve this:

First, install Livewire if you haven't already installed it:

composer require livewire/livewire

Create a Livewire component for the profile page:

php artisan make:livewire Profile

Update the Profile.php Livewire component to handle authentication and display appropriate content:

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use Illuminate\Support\Facades\Auth;

class Profile extends Component
{
    public function render()
    {
        if (Auth::check()) {
            // User is authenticated
            return view('livewire.auth-profile');
        } else {
            // Guest user
            return view('livewire.public-profile');
        }
    }
}

Create two Blade view files, one for authenticated users (auth-profile.blade.php) and another for guest users (public-profile.blade.php) in resources/views/livewire/ directory. These views will contain the specific content for each type of user.

Update the routes/web.php file to route requests to the Livewire component:

use App\Http\Livewire\Profile;

Route::get('/profile', Profile::class);

Finally, in your Blade views (auth-profile.blade.php and public-profile.blade.php), you can add content specific to authenticated and guest users respectively.
Now, when a user visits the /profile URL, Livewire will render the appropriate view based on their authentication status. The URL remains the same for both authenticated and guest users.

Practical code

views\layouts\app.blade.php
step 1: create button to view profile

<div class="container">
            <h3 class="mt-3 mb-5 text-center">Laravel 10 Livewire User Registration and Login </h3>
    <div class="text-left mt-3"> <!-- Adjust alignment -->
        <a href="{{ route('profile') }}" class="btn btn-primary">View Profile</a>
    </div>

step2: run liveware commands

php artisan make:livewire UserProfile

step3: mention route

Route::get('/profile', 'App\Http\Controllers\ProfileController@index')->name('profile');

step4: write controller function

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Log;
use Illuminate\Support\Facades\Auth;

class ProfileController extends Controller
{
    public function index()
    {

        return view('profile'); // Pass user data to the view
    }
}

step5: redirect to blade file

@extends('layouts.apps')

@section('content')
<!-- Your user profile content here -->

                @livewire('user-profile')
            </div>
        </div>
    </div>
</div>

@endsection

step6: go to livewire controller component file

<?php

namespace App\Livewire;

use Livewire\Component;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Log;
class UserProfile extends Component
{


    public $user;

    public function mount()
    {
        // Check if user is authenticated
        if (Auth::check()) {
            // Get the authenticated user
            $this->user = Auth::user();
        }

    }

    public function render()
    {
        return view('livewire.user-profile');
    }
}

step7: display profile data in liveware blade component

<!-- user-profile.blade.php -->

<div class="container">
    <div class="row">
        <div class="col-md-8 offset-md-2">
            <div class="text-center">
                <h2>User Profile</h2>

                @if($user)
                    <div>
                        Name: {{ $user->name }}
                    </div>
                    <div>
                        Email: {{ $user->email }}
                    </div>
                    <!-- Add more user profile information as needed -->
                @else
                    User data not available.
                @endif
            </div>
        </div>
    </div>
</div>

note: if user not login then redirect to different blade file

  public function render()
    {



        // Check if user is authenticated
        if (Auth::check()) {
            // User is logged in, return the user profile view
            return view('livewire.user-profile');
        } else {
            // User is not logged in, return the different view with user records
            return view('livewire.user-records');
        }
    }

output

reference