Develop Reference

How can I authenticate apollo with Auth0 in VueJS

I am struggling with a tutorial from Hasura which I believe might never have worked. I think it might be missing a piece and I'm interested in the most appropriate way to bridge the gap between when I've created and what will work.
From that documentation, as well as the Auth0 VueJS documentation I have been able to create a working VueJS application that authenticates via my Auth0 project and gives me back a user profile complete with user photo and email. So that's all working.
Following the Hausura tutorial from this I added apollo. I am now able to access non-protected GraphQL queries from my API but not protected ones. The reason is pretty clearly the code I added from the tutorial here:
getAuth: () => {
// get the authentication token from local storage if it exists
// return the headers to the context so httpLink can read them
const token = localStorage.getItem('apollo-token')
if (token) {
return 'Bearer ' + token
} else {
return ''
}
},
A console.log shows that token is null even when I'm logged in. It's pretty obvious why too. localStorage was never updated to contain a token. So of course it's null. There's no place in the tutorial that suggests this should be set anywhere but clearly it should.
So I did some digging and in that file src/vue-apollo.js there is an onLogin and onLogout function which require an ApolloClient object and in the case of the login, also a token. This will set the local storage appropriately.
Currently, my login is done within src/view/Home.vue like so:
login() {
this.$auth.loginWithRedirect()
// ... maybe do something here ?
},
Now if I were to add something like this after the login, it will not actually be called because of the redirect. But I think I need to add something like this:
this.$auth.getTokenSilently(token => {
onLogin(this.$apolloProvider.defaultClient, token)
}
Perhaps I need to add this into like the mounted() or beforeCreate() live cycle hook in my src/App.vue? I'm really not sure how to proceed here. Does this tutorial even really work?
Furthermore, isn't storing an auth token in localStorage a bad idea because of cross site request forgery?

You are right about it not being detailed in the post. I've not run the project but following the link to the source code of the demo. The /callback route creates the key via Callback component at /app/src/router.js:25, it add an authentication guard as well.
Then on /app/src/components/Callback.vue:25 on created handleAuthentication from auth service is called.
created() {
this.$auth.handleAuthentication();
}
You can check the code in /app/src/auth/authService.js it uses the auth0 library instance to get the token and call localLogin that saves the token in line 92.
About the security, I would follow the advice in Token Storage from Auth0.

How to use Chrome extension get Laravel passport token?

I'm working on using Chrome extension access Laravel passport API. Currently, the Laravel passport API is setup and working. I tried to use chrome.identity.launchWebAuthFlow to get passport token but not working. There is an example provided by Google, it is different from my use case.
I have two questions:
According to the Laravel document, the first step is request an authorization code, the API end point is /oauth/authorize. What the redirect_uri should be since it is a chrome extension but not a website?
After the user approve the request, I'm using chrome.identity.launchWebAuthFlow to get the access token from Passport. In laravel it is a POST request, the end point is /oauth/token. But I tried chrome.identity.launchWebAuthFlow, it is a GET request.
I can make this whole process working using PHP but not Chrome Extension. Any suggestions?

As per the launchWebAuthFlow docs:
When the provider redirects to a URL matching the pattern https://app-id.chromiumapp.org/*, the window will close, and the final redirect URL will be passed to the callback function.
As an example, you could use the following code:
let redirectUrl = chrome.identity.getRedirectURL('redirect');
chrome.identity.launchWebAuthFlow({
url: `https://my.app.domain.com/oauth/authorize?client_id=xxx&response_type=code&scope=&redirect_uri=${redirectUrl}`
}, (redirectUrl) => {
console.log(redirectUrl) // Redirect URL with oauth query params added
})

Manually Login by Facebook in Angular6 and Laravel

I'm developing an application which I'm writing in Angular 6 framework.
Currently, I would like to add user login by social media like: Facebook, Google, Twitter, Github, LinkedIn.
I have a four buttons for these actions in my SocialLoginComponent's template:
Now I'm trying to implement user login by facebook after clicking on CONNECT WITH FACEBOOK button which has an click angular action:
<button (click) = "loginWithFacebook()" class="social-button" id="facebook-connect"> <span>Connect with Facebook</span></button>
Implementation of function loginWithFacebook looks like:
loginWithFacebook() {
this.auth.loginByFacebook(this.apiKey, this.redirectUri).subscribe({
next: (v) => console.log(v)
});
}
Here auth is of course service injected by constructor:
constructor(private auth: AuthService) {
}
Below I show implementation method loginByFacebook method in my AuthService:
loginByFacebook(appId, redirectUri) {
const facebookParams = new HttpParams()
.set('client_id', appId)
.set('redirect_uri', redirectUri)
.set('response_type', 'token');
return this.http.get(this.facebookUrl, {params : facebookParams});
});
where facebookUrl is the AuthService property:
private facebookUrl = 'https://www.facebook.com/v3.1/dialog/oauth';
I'm setting up here of course parameters based on My Facebook App.
I'm trying to invoke that url by get method in order to obtain a facebook login dialog based on description from tutorial: manualyBuildALoginFlow. I wouldn't like to use JavaScript SDK in my solution.
In current state when I'm clicking on the faecebook button, there is response like below:
I would like to obtain modal dialog with confirmation like below:
In my Get request I add parameter response_type = token in order to obtain Social token. On the below diagram I show what flow I'm trying to achieve:
On above diagram my server is laravel framework which currently handle user login and returns JWT token in order to check that user's logged in to application. Next this token I save in local storage by Angular6 framework.
How could I obtain that redirection with modal window in Angular6? What I'm doing wrong is that redirection dosen't work? What first step should I do in order to implement such authorization using facebook?
I would be greateful for advices.
Best Regards

I'm trying to invoke that url by get method
Which means an AJAX request … and that is of course not possible.
You need to redirect the user to the login dialog URL, not try and request it in the background - for the simple reason, that users need to be able to verify via the browser address bar, that they are indeed entering their login credentials to Facebook, and not some phishing site. If you requested it via AJAX and displayed it “within” your page, that would not be possible.

I've implemented method as misorude suggests in my Auth Service:
loginWithFacebook(appId: number, redirectUri: string) {
window.location.href = `https://www.facebook.com/v3.1/dialog/oauth?client_id=${appId}&redirect_uri=${redirectUri}&response_type=token&display=popup`;
}
Currently the page redirects to my Facebook app. Next I confirm my login by Facebook in dialog window. Then browser redirect back to my Angular app and in my url I have Social token from Facebook like on the picture below:
Next I'd like to obtain this token from url and then to implement the data flow as below:
How should I correctly get an access token and post to my backend Server as on the schema above?
I would be greateful for help
Best regards

The redirect_uri issue in LinkedIn Login using React

I am trying to add LinkedIn authentication with React following this link https://github.com/orionsoft/react-linkedin-login. The tutorial doesn't mention the redirect_uri due to which I have left it as blank. But when I try to log in using my react app, an error occurs What is the correct redirect_uri to use in react application. The LinkedIn error goes like this "The redirect_uri does not match the registered value".
My website URL is http://localhost:3000
Please refer the screenshots for the settings of LinkedIn Developer Console
I am adding the code in react
import React, { Component } from 'react';
import LinkedIn from 'react-linkedin-login'
class SocialLogin extends Component {
constructor(props)
{
super(props);
}
callbackLinkedIn ({code, redirectUri}) {
console.log(code+"linked in code")
}
render() {
return (
<div className="login-box">
<div className="social-login">
<LinkedIn
clientId='***********'
callback={this.callbackLinkedIn.bind(this)}
text='LinkedIn' />
</div>
</div>
);
}
}
export default SocialLogin;
I am getting this issue ""The redirect_uri does not match the registered value"".please refer the last image
I have given the 4 redirect URLs like:
http://localhost:3000
http://localhost:3000/callback
http://localhost:3000/signin-linkedin
http://localhost:3000/auth/linkedin/callback
But I am getting the same issue. Please help me out with this issue.

Seeing your redirect URL in the screenshot, it can be deciphered that:
redirect_uri = http%3A%2F%2Flocalhost%3A3000%2F
which translates to http://localhost:3000/.
You are missing a / in the end. Your currently added URLs are all unnecessary.

You need to add the "http://localhost:3000/" in Authorized URI section. The request sent to Linkedin with the trailing slash at the end as parameter for redirect_uri.
I have attached the screenshots below

Possible issue might be the fact that the initial URL(The URL making the API Call) and the redirect URL(The URL which should open post response from linkedin) probably have different domains.
You can use a tool like filder to capture the API call to linkedIn login API and check what was the url in HTTP Request. You need to put a url with the same domain in the RedirectURL.

Please check that you passing the same clientId value as in developers console also while going through both the snaps you provided the clientId is not matching.
https://www.linkedin.com/oauth/v2/authorization?response_type=code&client_id=81jbduxh1ev9tj&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2F&state=987654321&scope=r_basicprofile

A lot of API's don't trust localhost. I'd suggest trying some tools like https://ngrok.com which tunnels your http/https traffic and gives you unique url.

Adding a test user in graph api (javascript sdk)

I am trying to add a couple to test users to an app I'm developing using google app engine and the javascript sdk. Following this link:, I tried this code:
FB.api ('/app_id/accounts/test-users', 'post', {installed:'true', permissions:'read_stream'}, function (response) {
alert (response.id);
});
(app_id was changed to the App ID as obtained in http://www.facebook.com/developers/apps.php)
But I get a popup "undefined". What is wrong with this code? I could not find any example for the javascript sdk.
As per the same facebook help page, response is supposed to be:
{
"id": "1231....",
"access_token":"1223134..." ,
"login_url":"https://www.facebook.com/platform/test_account.."
}
BTW, if I log in as myself,
FB.api('/me', function(user) {
welcomeMsg (user);
});
works just fine, so it's not a problem with app activation.

I don't think it's possible to perform this type of task using the Javascript SDK, which is intended to make calls on behalf of a user, not an app. For this type of call, it's necessary to authenticate as the app, and for that you need the app OAuth token and secret, which aren't available via Javascript (nor should they be, for security reasons). So the best solution here is to make this call serverside. To do so, you should follow the "App Login" instructions here to get an app access token, and then pass that token in to the /app_id/accounts/test-users API call (as the "access_token" param)