https://github.com/atomjoy/socialites
How to add Google and Github login button using Socialite in Laravel. Google One Tap with Vue and Laravel Socialite.
https://github.com/atomjoy/socialites
github-login-button github-login-button-vue3-laravel github-login-laravel google-login-button google-login-button-vue3-laravel google-one-tap laravel-github-login laravel-google-login laravel-socialite
Last synced: 6 months ago
JSON representation
How to add Google and Github login button using Socialite in Laravel. Google One Tap with Vue and Laravel Socialite.
- Host: GitHub
- URL: https://github.com/atomjoy/socialites
- Owner: atomjoy
- Created: 2024-05-21T18:07:37.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-25T16:04:19.000Z (about 2 years ago)
- Last Synced: 2025-06-03T02:15:12.535Z (about 1 year ago)
- Topics: github-login-button, github-login-button-vue3-laravel, github-login-laravel, google-login-button, google-login-button-vue3-laravel, google-one-tap, laravel-github-login, laravel-google-login, laravel-socialite
- Language: Blade
- Homepage: https://github.com/atomjoy/socialites
- Size: 52.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Google and Github Login with Laravel Socialite
How to add Google and Github login using Socialite in Laravel. Google One Tap with Vue and Laravel Socialite.
## Install
Add package and routes.
```sh
composer require "atomjoy/socialites"
```
## Callbacks and local domain
Change the callback domain, set the local domain to example.org and add ssl.
```sh
# Google callback
https://example.org/oauth/google/callback
# Github callback
https://example.org/oauth/github/callback
# How to set local domain and SSL for example.org (xampp)
https://github.com/atomjoy/xampp
```
## Create Google project
## Create Google OAuth consent screen
Create a consent screen for an app with permissions to:
- auth/userinfo.email
- auth/userinfo.profile
- openid
## Create Google oauth keys
Create **External** OAuth 2.0 client IDs add callback and retrieve keys
## Create a new oauth app on Github and get the keys
## Setings
Update the .env file in the callback links, just change the domain.
```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 service
Append in config/services.php
```php
[
'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'),
],
'oauth_drivers' => ['github', 'google']
];
```
## Login buttons
return view('socialites::login-buttons');
```html
@if (Auth::check())
{{ Auth::user()->name }}
{{ trans('Logout') }}
@else
{{ trans('Login with Google') }}
{{ trans('Login with Github') }}
@endif
```
## Javascript Google One Tap dialog and button (optional)
return view('socialites::login-onetap');
```html
@if (!Auth::check())
function handleCredentialResponse(response) {
window.location.href = '/oauth/google/redirect'
// Here we can do whatever process with the response we want (optional)
// Note that response.credential is a JWT ID token
// console.log("Encoded JWT ID token: " + response.credential);
// fetch('/oauth/google/oauth?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');
button.onclick = () => {
google.accounts.id.disableAutoSelect();
google.accounts.id.cancel();
}
}
@endif
```
## Run server
```sh
php artisan serve --host=localhost --port=8000
```
## Publish assets
```sh
# Copy Icons
php artisan vendor:publish --tag=socialites-assets --force
# Edit Views
php artisan vendor:publish --tag=socialites-views --force
# Create config example config/socialites.php
php artisan vendor:publish --tag=socialites-config --force
```
## Events
```php
[
'client_id' => env('FACEBOOK_CLIENT_ID'),
'client_secret' => env('FACEBOOK_CLIENT_SECRET'),
'redirect' => env('FACEBOOK_REDIRECT_URL'),
'homepage' => env('FACEBOOK_HOME_URL'),
],
'oauth_drivers' => ['github', 'google', 'facebook'],
];
```
## LICENSE
This project is licensed under the terms of the GNU GPLv3 license.