♻️ usage with nuxt.js
Add vue-social-auth/nuxt to modules section of nuxt.config.js
Module automatically add to $auth or property selected
License
The MIT License (MIT)
Copyright (c) 2022 Diadal Nig LTD
Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the “Software”), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Login
Set the global settings for the login action.
- endpoint – Set the URL of the login endpoint. It can be a relative or absolute path.
- propertyName – Set the name of the return object property that contains the access token.
Login(…args)
Login using active strategy. Usage varies by current strategy.
TIP: Using loginWith
is recommended instead of this function!
Loginwith(strategyname, …args)
Set current strategy to strategyName and attempt login. Usage varies by current strategy.
Logout
Sets the global settings for the logout action.
- endpoint – Set the URL of the logout endpoint. It can be a relative or absolute path.
- method – Set the request to POST or GET.
- paramTokenName – Set the access token query string parameter name.
- appendToken – Set true if you want the access token to be inserted in the URL.
Logout(…args)
Logout active strategy. Usage varies by current scheme.
Next install vue-social-auth
npm install vue-social-auth
Onerror(handler)
https://www.youtube.com/watch?v=InJXh-YH5B0
Listen for auth errors: (plugins/auth.js)
Onredirect(handler)
Pre-process URLs before redirect: (plugins/auth.js)
Properties
All properties are reactive. Meaning that you can safely use them in Vue template v-if conditions.
Refreshtokens()
Refreshes tokens if refresh token is available and not expired. This only works when logged in.
TIP: Useful to manually refresh the token.
Services.php
<?phpreturn [
// .....'twitter' => [
'client_id' => env('TWITTER_ID'),
'client_secret' => env('TWITTER_SECRET'),
'redirect' => env('TWITTER_URL'),
],
'facebook' => [
'client_id' => env('FACEBOOK_ID'),
'client_secret' => env('FACEBOOK_SECRET'),
'redirect' => env('FACEBOOK_URL'),
],
'github' => [
'client_id' => env('GITHUB_ID'),
'client_secret' => env('GITHUB_SECRET'),
'redirect' => env('GITHUB_URL'),
],
'google' => [
'client_id' => env('GOOGLE_ID'),
'client_secret' => env('GOOGLE_SECRET'),
'redirect' => env('GOOGLE_URL'),
],
'vkontakte' => [
'client_id' => env('VKONTAKTE_KEY'),
'client_secret' => env('VKONTAKTE_SECRET'),
'redirect' => env('VKONTAKTE_REDIRECT_URI'),
],
];
Setup
- Add
nuxt-auth
dependency using yarn or npm to your project - Add
nuxt-auth
and@nuxtjs/axios
tomodules
section ofnuxt.config.js
modules:
'nuxt-auth'
'@nuxtjs/axios'
auth:
login:
endpoint: 'auth/login'
propertyName: 'token'
logout:
endpoint: 'auth/logout'
method: 'GET'
paramTokenName: ''
appendToken: false
user:
endpoint: 'auth/user'
propertyName: 'user'
paramTokenName: ''
appendToken: false
storageTokenName: 'nuxt-auth-token'
tokenType: 'Bearer'
notLoggedInRedirectTo: '/login'
loggedInRedirectTo: '/'
Storagetokenname
Set the token name in the local storage and in the cookie.
Tokentype
Sets the token type of the authorization header.
Verifycsrftoken middleware
you may need to disable Csrf for the route if you receive Error: Request failed with status code 419
if any issue check
also you can buy me a coffee @ Patreon