Header failure in Ionic when attempting to pull user infor from laravel - laravel-passport

I set up passport authentication api between an ionic 5 application and laravel 9. After login, the access token is sent to the ionic app and stored. When i try to do pull user info, there seems to be a problem with how I structured the header as no response or error is received.
laravel
public function login(Request $request)
{
$validator = Validator::make($request->all(), [
'email' => 'required|string|email|max:255',
'password' => 'required|string|min:6',
]);
if ($validator->fails()) {
return response(['errors' => $validator->errors()->all()], 422);
}
$user = User::where('email', $request->email)->first();
if ($user) {
if (Hash::check($request->password, $user->password)) {
$token = $user->createToken('Pesacount-User-Access-Token')->accessToken;
$response = ['token' => $token];
return response($response, 200);
} else {
$response = ["message" => "Password mismatch"];
return response($response, 422);
}
} else {
$response = ["message" => 'User does not exist'];
return response($response, 422);
}
public function userInfo()
{
$user = auth()->user();
return response()->json(['user' => $user], 200);
}
Ionic
user() {
const headers = new HttpHeaders({
//'Authorization': this.global.token["token_type"] + " " + this.global.token["access_token"]
'Authorization': 'Bearer ' + this.global.token
});
alert('getting user');
return this.http.get(this.env.API_URL + 'auth/get-user', { headers: headers })
.pipe(
tap(user => {
alert('got uuser');
return user;
}),
)
}
What could I be doing wrong?
looking at the laravel logs, the error returned is
[2022-10-15 08:51:52] local.ERROR: The resource owner or authorization server denied the request. {"exception":"[object] (League\\OAuth2\\Server\\Exception\\OAuthServerException(code: 9): The resource owner or authorization server denied the request. at /var/www/html/Pesacount/vendor/league/oauth2-server/src/Exception/OAuthServerException.php:243)

There was a conflict with different authentication modules in Laravel thus a different token was generated and sent to ionic app from what was expected by laravel when during POST / GET requests

Related

auth:failed returns as Uncaught (in promise) SyntaxError: Unexpected token '<', "<!doctype "... is not valid JSON in vercel

I now deployed my MERN web app via vercel. Unfortunately, I encountered the above error that is actually not existent with my localhost. In which, pinpoints to the line .then(data => of this block of code:
useEffect(() => {
fetch(`${process.env.API_URL}/users/profile`, {
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${localStorage.getItem('token')}`
}
})
.then(res => res.json())
// console.log(res.status) added this just to check if it returns 200 and it is
.then(data => {
console.log(data)
if(typeof data._id !== "undefined") {
setUser({
id: data._id,
isAdmin: data.isAdmin
})
} else {
setUser({
id: null,
isAdmin: null
})
}
})
}, [])
I checked my API via Postman and it returns as
{
"auth": "failed"
}
It is also the same output as I console.log(). But this is actually an expected output since the error was on my App.js and it doesn't need to logged in yet. I just don't know why it is not returned as JSON and I also try to return it as false either but still return the auth error.
For more reference this is my API route and controller
router.get("/profile", auth.verify, (req, res) => {
const userData = auth.decode(req.headers.authorization)
if(userData){
userController.getProfile({id: userData.id}).then(result=> res.send(result))
} else {
res.send(false)
}
});
module.exports.getProfile = (reqBody) => {
return User.findById(reqBody.id).then((result, error) => {
if(error){
return false
} else {
if(result == null){
return false
} else {
result.password = "************"
return result
}
}
})
};
This is the only error I need to resolve to make my web app function correctly. I hope you will help me. Thanks a lot!
So, I have solved my own problem and successfuly deployed my web app via Vercel.
I checked my Vercel app and try other functions such as login and register. It turns out that my API URL is undefined. So, I presume that did not clicked the add button in setting environment variables during the deployment.
I created a new deployment with new repository since I did not figured out how to delete my pre-existing deployed app. I now make sure to click the add button once I entered my environment variables and its URL before clicking the Deploy button.

How to implement auto refresh token in graphql for jwt based authentication?

I am trying to figure out this scenario for my JWT based authentication in Apollo based graphql server (2.0) .
Basically after login a user gets accessToken and refreshToken from server.
AccessToken gets expired after certain period of time and server sends an error message indicating that token expired (TokenExpiredError) and then client need to communicate with server for new accessToken via passing refreshToken.
Flow is as following -
TokenExpiredError occurs
Get that error on client side
Queue all requests with old accessToken(so that server is not flooded with too many refreshToken calls and many accessTokens are generated by server)
Call refreshToken api on graphql server to get new accessToken
update accessToken for all authorised calls with new accessToken
Logout user incase refreshToken itself is expired
Prevent any kind of race condition b/w calls
I have already implemented refreshToken mutation on client side but can't figure out about when error occurs stop all requests -> request new token -> make all pending request again and if refresh token is expired logout user.
I followed this approach to solve my problem finally
Posting my approach for others
// #flow
import { ApolloLink, Observable } from 'apollo-link';
import type { ApolloClient } from 'apollo-client';
import type { Operation, NextLink } from 'apollo-link';
import { refreshToken2, getToken } from './token-service';
import { GraphQLError } from 'graphql';
export class AuthLink extends ApolloLink {
tokenRefreshingPromise: Promise<boolean> | null;
injectClient = (client: ApolloClient): void => {
this.client = client;
};
refreshToken = (): Promise<boolean> => {
//if (!this.tokenRefreshingPromise) this.tokenRefreshingPromise = refreshToken(this.client);
if (!this.tokenRefreshingPromise) this.tokenRefreshingPromise = refreshToken2();
return this.tokenRefreshingPromise;
};
setTokenHeader = (operation: Operation): void => {
const token = getToken();
if (token) operation.setContext({ headers: { authorization: `Bearer ${token}` } });
};
request(operation: Operation, forward: NextLink) {
// set token in header
this.setTokenHeader(operation);
// try refreshing token once if it has expired
return new Observable(observer => {
let subscription, innerSubscription, inner2Subscription;
try {
subscription = forward(operation).subscribe({
next: result => {
if (result.errors) {
console.log("---->", JSON.stringify(result.errors))
for (let err of result.errors) {
switch (err.extensions.code) {
case 'E140':
console.log('E140', result)
observer.error(result.errors)
break;
case 'G130':
this.refreshToken().then(response => {
if (response.data && !response.errors) {
this.setTokenHeader(operation);
innerSubscription = forward(operation).subscribe(observer);
} else {
console.log("After refresh token", JSON.stringify(response));
observer.next(response)
}
}).catch(console.log);
break;
}
}
}
observer.next(result)
},
complete: observer.complete.bind(observer),
error: netowrkError => {
observer.error(netowrkError);
}
},
});
} catch (e) {
observer.error(e);
}
return () => {
if (subscription) subscription.unsubscribe();
if (innerSubscription) innerSubscription.unsubscribe();
if (inner2Subscription) inner2Subscription.unsubscribe();
};
});
}
}

Auth0-js Custom Login - 401 Unauthorized

I've been working off of this React Quickstart on auth0 https://auth0.com/docs/quickstart/spa/react/02-custom-login , trying to implement a custom login. When I try to Login I get a 401 Unauthorized Error and when I try to Sign Up I get the same alert error but the user does get created and I get redirected to the home page. Mind you everything works fine using the Lock Widget but when I try to do it with the custom login it doesn't.
Here's the AuthService code which is the most relevant I feel. The Login component simply calls the login and signup methods.
export default class SocialAuthService extends EventEmitter {
constructor(clientId, domain) {
super()
// Configure Auth0
this.auth0 = new auth0.WebAuth({
clientID: 'clientID',
domain: 'domain',
responseType: 'token id_token',
redirectUri: 'http://localhost:3000/login'
})
this.login = this.login.bind(this)
this.signup = this.signup.bind(this)
this.loginWithGoogle = this.loginWithGoogle.bind(this)
this.loginWithTwitter = this.loginWithTwitter.bind(this)
this.loginWithFacebook = this.loginWithFacebook.bind(this)
}
login(username, password) {
this.auth0.client.login({
realm: 'Username-Password-Authentication',
username,
password
}, (err, authResult) => {
if (err) {
alert('Error: ' + err.description)
return
}
if (authResult && authResult.idToken && authResult.accessToken) {
this.setToken(authResult.accessToken, authResult.idToken)
browserHistory.replace('/home')
}
})
}
signup(email, password){
this.auth0.redirect.signupAndLogin({
connection: 'Username-Password-Authentication',
email,
password,
}, function(err) {
if (err) {
alert('Error: ' + err.description)
}
})
}
parseHash(hash) {
this.auth0.parseHash({ hash }, (err, authResult) => {
if (authResult && authResult.accessToken && authResult.idToken) {
this.setToken(authResult.accessToken, authResult.idToken)
browserHistory.replace('/home')
this.auth0.client.userInfo(authResult.accessToken, (error, profile) => {
if (error) {
console.log('Error loading the Profile', error)
} else {
this.setProfile(profile)
}
})
} else if (authResult && authResult.error) {
alert('Error: ' + authResult.error)
}
})
}
loggedIn() {
// Checks if there is a saved token and it's still valid
const token = this.getToken()
return !!token && !isTokenExpired(token)
}
setToken(accessToken, idToken) {
// Saves user access token and ID token into local storage
localStorage.setItem('access_token', accessToken)
localStorage.setItem('id_token', idToken)
}
setProfile(profile) {
// Saves profile data to localStorage
localStorage.setItem('profile', JSON.stringify(profile))
// Triggers profile_updated event to update the UI
this.emit('profile_updated', profile)
}
getProfile() {
// Retrieves the profile data from localStorage
const profile = localStorage.getItem('profile')
return profile ? JSON.parse(localStorage.profile) : {}
}
getToken() {
// Retrieves the user token from localStorage
return localStorage.getItem('id_token')
}
logout() {
// Clear user token and profile data from localStorage
localStorage.removeItem('id_token')
localStorage.removeItem('profile')
}
loginWithGoogle() {
this.auth0.authorize({
connection: 'google-oauth2'
})
}
loginWithTwitter() {
this.auth0.authorize({
connection: 'twitter'
})
}
loginWithFacebook() {
this.auth0.authorize({
connection: 'facebook'
})
}
}
And this is the error:
Object
code
:
"access_denied"
description
:
"Unauthorized"
original
:
Error: Unauthorized at Request.<anonymous> (http://localhost:3000/static/js/bundle.js:49311:20) at Request.Emitter.emit (http://localhost:3000/static/js/bundle.js:49954:21) at XMLHttpRequest.xhr.onreadystatechange (http://localhost:3000/static/js/bundle.js:49616:11)
statusCode
:
401
statusText
:
"Unauthorized"
Any ideas on why I'm not able to Login ?
Not sure if you got an answer, but I was running into the same problem and it was because the backend wasn't able to properly decode the JWT. Custom Login signs with a RS256 token while it seems Lock signs with HS256. You have to decode these differently in your backend.
Here's a python example
Auth0.js version 8 verifies ID tokens during authentication transactions. Only tokens which are signed with the RS256 algorithm can be verified on the client side, meaning that your Auth0 client must be configured to sign tokens with RS256. See the auth0.js migration guide for more details.
I ran into a similar issue and my fix was switching the "Application Type" setting in Auth0 from "Regular Web Application" to "Single Page Application".
The Auth0 React SDK docs make it clear that you have to register your app as a single-page application in order for Auth0 to configure the appropriate settings, so that your web client can make successful requests to their endpoints.

How to retrieve user's additional information from Azure Mobile/App Services?

I need to get the user's extra information from social accounts like Facebook and Google+. When I first read about Azure Mobile Services I thought it to be the holy grail of social authentication. Well, after a full week of hair pulling I'm starting to reconsider my first impression. It does authenticate as easily as it could possibly do. I configured Google+ and FB to work with Azure, configured Azure to use the key/secret from each provider and it all just worked. I was able to login perfectly. The problem started when I tried to get information from the logged user, which I honestly think is basic!
Azure Mobile Services returns the UserId and a Token that you can not use to request the extra info on the selected provider. So even if I were to create a second request using FB's graph API for instance, that wouldn't work (I've tried!). That token is Azure's own token. So I found out from several Carlos Figueira (SE at Azure) posts that I should customize my Azure script, make a request to Azure and then I'd be able to get it working.
I've also read several posts from Carlos Figueira on how to implement that extra functionality and even though that was not what I was looking for (customizing the server) I decided to work with that. But my return type is a MobileServiceUser and that type only has 2 properties: UserId and MobileServiceAuthenticationToken. So even after adding the server script from Carlos I couldn't retrieve the extra information from my Xamarin App.
I've read a lot of things, researched a lot and couldn't find an answer =/ By the way this is not the answer:
How to get user name, email, etc. from MobileServiceUser?
Did anyone manage to make it work?
PS: I'm not posting any code here because it's working. If you think checking some part of my code would help decipher the problem just let me know.
Thanks in advance!
EDIT:
Script
function insert(item, user, request) {
item.UserName = "<unknown>"; // default
user.getIdentities({
success: function (identities) {
var url = null;
var oauth = null;
if (identities.google) {
var googleAccessToken = identities.google.accessToken;
url = 'https://www.googleapis.com/oauth2/v3/userinfo?access_token=' + googleAccessToken;
} else if (identities.facebook) {
var fbAccessToken = identities.facebook.accessToken;
url = 'https://graph.facebook.com/me?access_token=' + fbAccessToken;
} else if (identities.microsoft) {
var liveAccessToken = identities.microsoft.accessToken;
url = 'https://apis.live.net/v5.0/me/?method=GET&access_token=' + liveAccessToken;
} else if (identities.twitter) {
var userId = user.userId;
var twitterId = userId.substring(userId.indexOf(':') + 1);
url = 'https://api.twitter.com/1.1/users/show.json?user_id=' + twitterId;
var consumerKey = process.env.MS_TwitterConsumerKey;
var consumerSecret = process.env.MS_TwitterConsumerSecret;
oauth = {
consumer_key: consumerKey,
consumer_secret: consumerSecret,
token: identities.twitter.accessToken,
token_secret: identities.twitter.accessTokenSecret
};
}
if (url) {
var requestCallback = function (err, resp, body) {
if (err || resp.statusCode !== 200) {
console.error('Error sending data to the provider: ', err);
request.respond(statusCodes.INTERNAL_SERVER_ERROR, body);
} else {
try {
var userData = JSON.parse(body);
item.UserName = userData.name;
request.execute();
} catch (ex) {
console.error('Error parsing response from the provider API: ', ex);
request.respond(statusCodes.INTERNAL_SERVER_ERROR, ex);
}
}
}
var req = require('request');
var reqOptions = {
uri: url,
headers: { Accept: "application/json" }
};
if (oauth) {
reqOptions.oauth = oauth;
}
req(reqOptions, requestCallback);
} else {
// Insert with default user name
request.execute();
}
}
});
}
You're talking about the token on the client side correct? That token is specific only to the client. If you're using Server Side flow, the server is the only one with that token. If you want to send that to the client, you need to do that via a custom API you create.
This class you're talking about does only contain those two properties. But on your server side, your ServiceUser can access the different identity provider tokens in order to speak to those servers APIs. Your linked post is correct in how you access the token, you're mistaken on where you can access that token, it's only on the server side (if you use the server directed login flow).
Here is the custom API Script I had working in Mobile Services to return the profile of the logged in user. I am working on updating to Mobile Apps as some environment variables appear to have changed. Would love to know if anyone has gotten it to work with Mobile Apps.
exports.get = function (request, response) {
var user = request.user;
user.getIdentities({
success: function (identities) {
var req = require('request');
var url = null;
var oauth = null;
var userId = user.userId.split(':')[1];
console.log('Identities: ', identities);
if (identities.facebook) {
url = 'https://graph.facebook.com/me?access_token=' +
identities.facebook.accessToken;
} else if (identities.google) {
url = 'https://www.googleapis.com/oauth2/v3/userinfo' +
'?access_token=' + identities.google.accessToken;
} else if (identities.microsoft) {
url = 'https://apis.live.net/v5.0/me?access_token=' +
identities.microsoft.accessToken;
} else if (identities.twitter) {
var consumerKey = process.env.MS_TwitterConsumerKey;
var consumerSecret = process.env.MS_TwitterConsumerSecret;
oauth = {
consumer_key: consumerKey,
consumer_secret: consumerSecret,
token: identities.twitter.accessToken,
token_secret: identities.twitter.accessTokenSecret
};
url = 'https://api.twitter.com/1.1/users/show.json?' +
'user_id=' + userId + '&include_entities=false';
} else {
response.send(500, { error: 'No known identities' });
return;
}
if (url) {
var reqParams = { uri: url, headers: { Accept: 'application/json' } };
if (oauth) {
reqParams.oauth = oauth;
}
req.get(reqParams, function (err, resp, body) {
if (err) {
console.error('Error calling provider: ', err);
response.send(500, { error: 'Error calling provider' });
return;
}
if (resp.statusCode !== 200) {
console.error('Provider call did not return success: ', resp.statusCode);
response.send(500, { error: 'Provider call did not return success: ' + resp.statusCode });
return;
}
try {
var userData = JSON.parse(body);
response.send(200, userData);
} catch (ex) {
console.error('Error parsing response: ', ex);
response.send(500, { error: ex });
}
});
} else {
response.send(500, { error: 'Not implemented yet', env: process.env });
}
}
});
};

Oauth for Connect-auth for www.500px.com

I'm trying to extend connect-auth (https://github.com/ciaranj/connect-auth) to connect to http://www.500px.com oauth, but am having issues and can't find a way to debug other than console.log.
I added a strategy five00px.js ( can't name a variable 500px ) as per below, which is a copy of twitter.js strategy with some string substitution.
I keep getting Invalid OAuth Request
Error retrieving the OAuth Request Token: {"statusCode":401,"data":"Invalid OAuth Request"}
I can't really see the OAUTH request as it's in HTTP.
Any idea ?
// five00px.js
/*!
* Copyright(c) 2010 Ciaran Jessup <ciaranj#gmail.com>
* MIT Licensed
*/
var OAuth= require("oauth").OAuth,
url = require("url"),
http = require('http');
module.exports= function(options, server) {
options= options || {}
var that= {};
var my= {};
// Construct the internal OAuth client
my._oAuth= new OAuth("https://api.500px.com/v1/oauth/request_token",
"https://api.500px.com/v1/oauth/access_token",
options.consumerKey, options.consumerSecret,
"1.0A", options.callback || null, "HMAC-SHA1");
console.log('1');
// Give the strategy a name
that.name = "five00px";
// Build the authentication routes required
that.setupRoutes= function(app) {console.log('2setupRoutes');
app.use('/auth/five00px_callback', function(req, res){console.log('3five00px_callback');
req.authenticate([that.name], function(error, authenticated) {console.log('4authenticate');
res.writeHead(303, { 'Location': req.session.five00px_redirect_url });
res.end('');
});
});
}
// Declare the method that actually does the authentication
that.authenticate= function(request, response, callback) {console.log('5authenticate');
//todo: if multiple connect middlewares were doing this, it would be more efficient to do it in the stack??
var parsedUrl= url.parse(request.originalUrl, true);
this.trace('parsedUrl=' + request.originalUrl);
//todo: makw the call timeout ....
var self= this;
if( request.getAuthDetails()['500px_login_attempt_failed'] === true ) {
// Because we bounce through authentication calls across multiple requests
// we use this to keep track of the fact we *Really* have failed to authenticate
// so that we don't keep re-trying to authenticate forever.
delete request.getAuthDetails()['500px_login_attempt_failed'];
self.fail( callback );
}
else {
if( parsedUrl.query && parsedUrl.query.denied ) {
self.trace( 'User denied OAuth Access' );
request.getAuthDetails()['500px_login_attempt_failed'] = true;
this.fail(callback);
}
else if( parsedUrl.query && parsedUrl.query.oauth_token && request.session.auth["500px_oauth_token_secret"] ) {
self.trace( 'Phase 2/2 : Requesting an OAuth access token.' );
my._oAuth.getOAuthAccessToken(parsedUrl.query.oauth_token, request.session.auth["500px_oauth_token_secret"],
function( error, oauth_token, oauth_token_secret, additionalParameters ) {
if( error ) {
self.trace( 'Error retrieving the OAuth Access Token: ' + error );
request.getAuthDetails()['500px_login_attempt_failed'] = true;
this.fail(callback);
}
else {
self.trace( 'Successfully retrieved the OAuth Access Token' );
request.session.auth["500px_oauth_token_secret"]= oauth_token_secret;
request.session.auth["500px_oauth_token"]= oauth_token;
var user= { user_id: additionalParameters.user_id,
username: additionalParameters.screen_name }
self.executionResult.user= user;
self.success(user, callback)
}
});
}
else {
my._oAuth.getOAuthRequestToken(function(error, oauth_token, oauth_token_secret, oauth_authorize_url, additionalParameters ) {
if(error) {
self.trace( 'Error retrieving the OAuth Request Token: ' + JSON.stringify(error) );
callback(null); // Ignore the error upstream, treat as validation failure.
} else {
self.trace( 'Successfully retrieved the OAuth Request Token' );
request.session['500px_redirect_url']= request.originalUrl;
request.session.auth["500px_oauth_token_secret"]= oauth_token_secret;
request.session.auth["500px_oauth_token"]= oauth_token;
self.redirect(response, "https://api.500px.com/oauth/authenticate?oauth_token=" + oauth_token, callback);
}
});
}
}
}
return that;
};
Have to use OAuth 1.0 (instead of 1.0A)
my._oAuth= new OAuth("https://api.500px.com/v1/oauth/request_token",
"https://api.500px.com/v1/oauth/access_token",
options.consumerKey, options.consumerSecret,
"1.0",
options.callback || null, "HMAC-SHA1");

Resources