Nuxt + Laravel Sanctum Socialite
Hello,
im currently having a problem on socialite callback, i can login on the backend using Auth::login(), after loging in im redirecting it to the frontend, but still im not logged in on the front end, logging in using email password is working fine.
im using https://manchenkoff.gitbook.io/nuxt-auth-sanctum
This is the route for laravel
Route::get('/auth/{provider}/redirect', function ($provider) {
return Socialite::driver($provider)->stateless()->redirect();
});
Route::get('/auth/{provider}/callback', function ($provider, Request $request) {
$socialUser = Socialite::driver($provider)->stateless()->user();
$user = User::firstOrCreate(
[$provider . '_id' => $socialUser->getId()],
[
'name' => $socialUser->getName(),
'email' => $socialUser->getEmail(),
]
);
// Log in the user
Auth::login($user, true);
$token = $user->createToken('api-token')->plainTextToken;
return redirect()->away(
config('app.frontend_url') . '/auth/callback?' . http_build_query([
'token' => $token,
'user' => json_encode($user)
])
);
});
this is the callback page on frontend
<script setup lang="ts">
import { useRouter, useRoute } from 'vue-router';
const sanctumConfig = useSanctumConfig()
const sanctumFetch = useSanctumClient()
const { login,refreshIdentity } = useSanctumAuth()
const router = useRouter();
definePageMeta({
layout: 'minimal',
middleware: ['sanctum:guest'],
});
onMounted(async () => {
const urlParams = new URLSearchParams(window.location.search);
const token = urlParams.get('token');
const userlogged = urlParams.get('user');
console.log(userlogged);
console.log(token);
const response = await refreshIdentity()
console.log(response);
navigateTo(sanctumConfig.redirect.onGuestOnly || '/')
});
</script>
<template>
loading
</template>
Introduction | Nuxt - Laravel Sanctum
This module provides a simple way to use Laravel Sanctum with Nuxt. SSR-ready!
2 Replies
Hi @Jaems. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Based on the information provided in the knowledge sources, I don't have enough specific details to fully address your issue with Nuxt, Laravel Sanctum, and Socialite integration. However, I can provide some general guidance and suggestions based on similar authentication scenarios in Nuxt:
1. Token handling: It seems you're passing the token and user data via URL parameters. Instead of using URL parameters, consider using a more secure method like storing the token in an HTTP-only cookie.
2. Authentication state: After receiving the token, you need to set the authentication state in your Nuxt application. The
useSanctumAuth composable you're using should have a method to set the authenticated state, similar to the login method you mentioned.
3. Refresh identity: You're calling refreshIdentity(), but it's not clear if this method is setting the authentication state correctly. Make sure this method is updating the user session in your Nuxt app.
4. CSRF token: If you're using Laravel Sanctum, ensure that you're handling the CSRF token correctly. As mentioned in the Stack Overflow post about Laravel Sanctum and Nuxt, CSRF token mismatch can cause authentication issues.
5. Session domain: Check your session domain configuration in Laravel. As suggested in the same Stack Overflow post, you might need to adjust the SESSION_DOMAIN in your Laravel configuration.
6. Middleware: Your current setup uses the sanctum:guest middleware. You might need to adjust this or create a custom middleware to handle the social authentication callback properly.
To troubleshoot further:
1. Check the network requests in your browser's developer tools to see if the token is being sent correctly to your backend.
2. Verify that the refreshIdentity method is working as expected and updating the authentication state.
3. Ensure that your Nuxt configuration for Sanctum is correct, especially the endpoints and cookies settings.
If you continue to face issues, you might want to consider asking for help in the Nuxt community discussions, as suggested in the Nuxt documentation on getting help. They might be able to provide more specific guidance for your Nuxt + Laravel Sanctum + Socialite setup.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@730044235767611504> Kapa.ai is still learning and improving, please let me know how I did by reacting below.