here I try to log in using google at nuxt.js, but when I log in with my Google account, the page doesn't move
has anyone experienced the same thing?
I hope someone provides an example of the code. thank you
this.my code login.vue
async loginGoogle() {
try {
let response = await this.$auth.loginWith('google', {})
console.log(response)
} catch (err) {
console.log(err)
}
}
this my code nuxt.config.js
google: {
client_id: 'xxxxxxxxx.apps.googleusercontent.com',
redirect_uri: 'http://localhost:3000',
},
I have take a look at https://auth.nuxtjs.org/api/options.html#redirect
It looks different they use auth in ther nuxt.config.js
auth: {
redirect: {
login: '/login',
logout: '/',
callback: '/login',
home: '/'
}
}
Related
I am using Spotify authentication and in the callback I set the cookie and redirect to another page:
export default async (req, res) => {
const token = await getToken(req.query.code);
res.setHeader('Set-Cookie', cookie.serialize('token', JSON.stringify(token), {
httpOnly: true,
secure: process.env.NODE_ENV === 'production',
maxAge: token.expires_in,
sameSite: 'strict',
path: '/',
}));
res.redirect(token ? '/cloner' : '/');
}
On '/cloner' page I do SSR where '/' is the path to the login page:
export async function getServerSideProps(ctx) {
const cookies = nookies.get(ctx);
if (!cookies.token) { // <-- is undefined
return {
redirect: {
destination: '/',
permanent: false,
}
}
}
return {
props: {}
}
}
In the getServerSideProps the token is undefined so is returning me to the login page ('/').
BUUUUUUT, if I check in the site I can see the cookie, and if I write the /cloner manually that page load just right.
If you check in the link below you will see that if you login redirect to login again. But, if you refresh the login page it sends you to the cloner page (in login I have also SSR to redirect to cloner if already login)
https://playlist-cloner.vercel.app/
my backend in laravel and i set if user login to another device then current device auth token is invalid
i also want if he get unathenticated error 401 in axios then instant logout and redirect to login page
i am doing like this
export default function({ $axios, redirect, $auth }) {
$axios.onError(error => {
if (error.response.status === 401) {
if ($auth.loggedIn) {
$auth.logout();
}
redirect("/login");
}
});
}
but nothing happen and when i check console.log($auth) its getting undefine
Help me thank you
If you need to access $auth from $axios plugin, you can use auth.plugins option.
https://auth.nuxtjs.org/recipes/extend.html
{
modules: [
'#nuxtjs/auth'
],
auth: {
plugins: [ { src: '~/plugins/axios', ssr: true }, '~/plugins/auth.js' ]
}
}
I am trying to get a list of all the pages the logged user an Admin of, but I am getting the error "An active access token must be used to query information about the current user". Here is the code I am using:
function login(){
FB.login(function(response) {
if (response.authResponse) {
$.get("https://graph.facebook.com/me/accounts", function(data) {
alert( "success" );
})
.done(function() {
alert( "second success" );
})
.fail(function(data) {
alert( "error" );
})
.always(function() {
alert( "finished" );
});
} else {
// not auth / cancelled the login!
}
}, { scope: "manage_pages" });
}
So in this code, after logging in, the call $.get("https://graph.facebook.com/me/accounts") throws the error.
UPDATE:
I am able to get the the list using FB.api("/me/accounts"). So how come I can't get it using this code? What am I doing wrong? Thanks.
Simple: You are not passing a user access token with your direct request:
$.get("https://graph.facebook.com/me/accounts", function(data) { ... });
instead of
var accessToken = "aoidhfgoafhgoidfhg"; // replace with real access token
$.get("https://graph.facebook.com/me/accounts?access_token=" + accessToken, function(data) { ... });
The FB SDK does this internally/automatically. What's not really clear to me is why you don't use the FB SDK here as well, if you're already using it for FB Login. That doesn't make much sense IMHO.
I have an app in which I have include a fb login.I am using ember-simple-auth for authorization and session manganement.I am able to authenticate the user and move to my "feed" hbs .The problem is when I open the app on another tab it is rendering the login page.How do I implement where if the user is authenticated it directly move to "feed" hbs.Similary to facebook,instagram where user login for the first time and after that they are redirect to feed page until they logout.
autheticator.js
const { RSVP } = Ember;
const { service } = Ember.inject;
export default Torii.extend({
torii: service('torii'),
authenticate() {
return new RSVP.Promise((resolve, reject) => {
this._super(...arguments).then((data) => {
console.log(data.accessToken)
raw({
url: 'http://example.com/api/socialsignup/',
type: 'POST',
dataType: 'json',
data: { 'access_token':'CAAQBoaAUyfoBAEs04M','provider':'facebook'}
}).then((response) => {
console.log(response)
resolve({
// jscs:disable requireCamelCaseOrUpperCaseIdentifiers
access_token: response.access_token,
// jscs:enable requireCamelCaseOrUpperCaseIdentifiers
provider: data.provider
});
}, reject);
}, reject);
});
}
});
router.js
import Ember from 'ember';
import config from './config/environment';
var Router = Ember.Router.extend({
location: config.locationType
});
Router.map(function() {
this.route('index',{path:'/'});
this.route("aboutus",{path:'/aboutus'});
this.route('feed',{path:'/feed'});
});
export default Router;
You need to use the application-route-mixin.js in the route that will be the first shown after login and authenticated-route-mixin.js for all the routes that need to be logged to see them. Check this example for further information.
Let's say you have an AngularJS application hooked up to a RESTful API and you have a route for "/item/:itemId".
.when('/item/:itemId', {
templateUrl: '/static/partials/item-detail.html',
controller: ItemDetailController
})
angular.module('angServices', ['ngResource']).factory('Item', function($resource) {
return $resource('/api/item/:itemId', {}, {
query: { method: 'GET', params: { itemId: '' }, isArray: true }
});
});
If the user goes to "/item/9" and an object with the itemId 9 does not exist, Angular will receive a 404 from the API, but will not naturally return a 404 to the user.
In other questions, I've seen people suggest creating an interceptor and having Angular redirect to a 404 error page when a resource is not found.
var interceptor = ['$rootScope', '$q', function(scope, $q) {
...
function error(response) {
if (response.status == 404) { window.location = '/404'; }
...
$httpProvider.responseInterceptors.push(interceptor);
However, I want to return a correct 404 with the original requested URL for SEO purposes.
Also, the solution above first loads the page and then redirects (just like Twitter used to do), so its sub-optimal.
Should I check server-side to first see if the resource exists before passing the request on to the Angular app? The downside of this is that it wouldn't work for broken links within the application.
What is the best way to approach this?
Maybe this jsfiddle can help you.
http://jsfiddle.net/roadprophet/VwS2t/
angular.module('dgService', ['ngResource']).factory("DriveGroup", function ($resource) {
return $resource(
'/', {}, {
update: {
method: 'PUT'
},
fetch: {
method: 'GET',
// This is what I tried.
interceptor: {
response: function (data) {
console.log('response in interceptor', data);
},
responseError: function (data) {
console.log('error in interceptor', data);
}
},
isArray: false
}
}
);
});
var app = angular.module('myApp', ['ngResource', 'dgService']);
app.controller('MainController', ['$scope', 'DriveGroup', function ($scope, svc) {
$scope.title = 'Interceptors Test';
svc.fetch(function (data) {
console.log('SUCCESS');
}, function () {
console.log('FAILURE');
});
}]);
I tried with this and works fine. I only change the fetch method to get.
In your case, you will need to change the console.log('FALIURE'); to $location.path('/404');.
GL!