elkebirmed's avatar

Redirect to socialite provider is not working using Livewire

I want to redirect to an OAuth2 socialite provider when a user clicks a button, but nothing is working.

<?php

namespace App\Http\Livewire\Pages;

use App\Models\User;
use App\Models\Country;
use Livewire\Component;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Hash;
use Laravel\Socialite\Facades\Socialite;

class Register extends Component
{
    public $name;
    public $email;
    public $username;
    public $country;
    public $password;
    public $password_confirmation;
    public $user;

    public function submit()
    {
        $this->validate([
            'name'     => ['required', 'string', 'max:255'],
            'email'    => ['required', 'string', 'email', 'max:255', 'unique:users'],
            'username' => ['required', 'string', 'regex:/^\S*$/u', 'min:3', 'max:255', 'unique:users'],
            'country'  => ['required', 'exists:countries,code'],
            'password' => ['required', 'string', 'min:8', 'confirmed'],
        ]);

        User::create([
            'name'       => $this->name,
            'email'      => $this->email,
            'username'   => $this->username,
            'country_id' => Country::where('code', $this->country)->first()->id,
            'password'   => Hash::make($this->password),
        ]);

        if (Auth::attempt([
            'email'    => $this->email,
            'password' => $this->password,
        ])) {
            return redirect()->intended('welcome');
        }
    }

    public function redirectToGithub()
    {
        return Socialite::driver('github')
            ->scopes(['read:user'])
            ->redirect();
    }

    public function render()
    {
        $countries = Country::all()->sortBy('name');

        return view('livewire.pages.register', compact(['countries']));
    }
}

<button wire:click.prevent="redirectToGithub">Github</button>
0 likes
3 replies
jringeisen's avatar

@elkebirmed @adityar15 I ran into this same issue so I created a FacebookOauthController that handled the socialite piece like such:

/**
     * Handle the incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function __invoke(Request $request)
    {
        $scopes = [
            'pages_manage_posts',
            'pages_read_engagement',
            'instagram_basic',
            'instagram_content_publish',
            'pages_show_list',
        ];

        return Socialite::driver('facebook')->scopes($scopes)->redirect();
    }

Then I created a route for the controller in the web.php file, like such:

Route::get('/facebook-oauth', \App\Http\Controllers\FacebookOauthController::class)
    ->name('facebook.oauth');

Then, inside my Livewire component I did this:

public function handleFacebookOauth()
    {
        return redirect()->route('facebook.oauth');
    }

Works as expected!

fernandovinta's avatar

I make it work on a Volt Livewire component like this:

<?php

use Laravel\Socialite\Facades\Socialite;

$redirectToProvider = function () {
    $this->redirect(
        url: Socialite::driver('google')->stateless()->redirect()->getTargetUrl()
    );
};

?>

<div>
    <div class="mt-3 flex flex-row justify-center">
        <form wire:submit="redirectToProvider">
            <div class="flex items-center justify-center">
                <button
                    type="submit"
                    class="bg-white px-8 py-2 border flex gap-2 border-slate-200 rounded-lg text-slate-700 hover:border-slate-400 hover:text-slate-900  hover:shadow transition duration-150">
                    <img class="w-6 h-6"
                         src="{{ asset('images/google-icon.svg') }}"
                         loading="lazy"
                         alt="google logo">
                    <span>Login with Google</span>
                </button>
            </div>
        </form>
    </div>
    <div class="relative my-5">
        <div class="absolute inset-0 flex items-center" aria-hidden="true">
            <div class="w-full border-t border-gray-300"></div>
        </div>
        <div class="relative flex justify-center">
            <span class="bg-white px-2 text-sm text-gray-500">Or</span>
        </div>
    </div>
</div>
1 like

Please or to participate in this conversation.