https://github.com/atomjoy/laravel-socialite
Google and Github Login with Laravel Socialite (Tutorial).
https://github.com/atomjoy/laravel-socialite
github-login-button github-login-laravel google-login-button google-login-laravel laravel-github-login laravel-google-login laravel-social-login laravel-socialite
Last synced: about 1 month ago
JSON representation
Google and Github Login with Laravel Socialite (Tutorial).
- Host: GitHub
- URL: https://github.com/atomjoy/laravel-socialite
- Owner: atomjoy
- Created: 2024-05-21T07:47:54.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-21T18:14:35.000Z (about 2 years ago)
- Last Synced: 2025-11-19T04:19:12.906Z (7 months ago)
- Language: PHP
- Homepage:
- Size: 53.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Laravel Socialite (Tutorial)
How to add Google and Github login using Socialite in Laravel. Google One Tap with Vue and Laravel Socialite.
## Install
- composer require laravel/socialite
- Add local domain host example.org and enable domain SSL in xampp virtualhost (for callbacks and js) or try with localhost
- Windows local domain and virtualhost in xampp https://github.com/atomjoy/xampp
## Google project
## Google OAuth consent screen
Create a consent screen for an app with permissions to:
- auth/userinfo.email
- auth/userinfo.profile
- openid
## Google oauth keys
Create external OAuth 2.0 client IDs and retrieve keys
## Github new app oauth keys
## Setings
.env file
```sh
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=
GOOGLE_REDIRECT_URL=https://example.org/oauth/google/callback
GOOGLE_HOME_URL=/
GITHUB_CLIENT_ID=
GITHUB_CLIENT_SECRET=
GITHUB_REDIRECT_URL=https://example.org/oauth/github/callback
GITHUB_HOME_URL=/
```
## Config
config/services.php
```sh
'google' => [
'client_id' => env('GOOGLE_CLIENT_ID'),
'client_secret' => env('GOOGLE_CLIENT_SECRET'),
'redirect' => env('GOOGLE_REDIRECT_URL'),
'homepage' => env('GOOGLE_HOME_URL'),
],
'github' => [
'client_id' => env('GITHUB_CLIENT_ID'),
'client_secret' => env('GITHUB_CLIENT_SECRET'),
'redirect' => env('GITHUB_REDIRECT_URL'),
'homepage' => env('GITHUB_HOME_URL'),
],
// Set allowed drivers here or update checkDriver() in OauthLoginController
'oauth_drivers' => ['github', 'google'],
```
## Routes
```php
{{ Auth::user()->name }}
Logout
@else
Login with Google
Login with Github
@endif
```
## Javascript Google One Tap and button (optional)
```html
@if (!Auth::check())
function handleCredentialResponse(response) {
window.location.href = '/oauth/google/redirect'
// window.location.href = '/oauth/google/oauth?token=' + response.credential
// Here we can do whatever process with the response we want
// Note that response.credential is a JWT ID token
// console.log("Encoded JWT ID token: " + response.credential);
}
window.onload = function () {
google.accounts.id.initialize({
client_id: "{{ config('services.google.client_id') }}", // Or replace with your Google Client ID
callback: handleCredentialResponse // We choose to handle the callback in client side, so we include a reference to a function that will handle the response
});
// Show "Sign-in" button (optional)
google.accounts.id.renderButton(document.getElementById("buttonDiv"),{ theme: "outline", size: "small" });
// Display the One Tap dialog
google.accounts.id.prompt();
// Hide One Tap onclick
const button = document.querySelector('body');
// Event
button.onclick = () => {
google.accounts.id.disableAutoSelect();
google.accounts.id.cancel();
}
}
@endif
```