angular 11 router.navigateByUrl abd qyeryparams - angular10

Working with Angular 10 this was valid
this.router.navigateByUrl(targetUrl, {
queryParams: {
token: accessToken
}
});
Now (Angular 11) queryParams is not supported anymore what can I do to get the same functionality

this.router.navigate([url], {
relativeTo: this.route,
queryParams: {token: accessToken},
});
Try with this code snippet

Related

The OAuth response flow failed

I'm using aws amplify along with react-native-inappbrowser. I enabled Google SSO authentication and it is working fine, but when I added GitHub auth it doesn't work as expected.
I added a listener using Hub.listen('auth', async (data) => {...} and the urlOpener in my awsConfig looks like this:
onst urlOpener = async (url, redirectUrl, settings) => {
try {
if (await InAppBrowser.isAvailable()) {
const { type, url: newUrl } = await InAppBrowser.openAuth(
url,
redirectUrl,
{ ...inAppBrowserSettings, ...settings },
);
if (type === 'success') {
Linking.openURL(newUrl);
}
} else {
Linking.openURL(url);
}
} catch (error) {
Alert.alert(error.message);
}
};
The Hub.listener looks like this:
useEffect(() => {
const unsubscribe = Hub.listen('auth', async (data) => {
const { payload } = data;
const user = payload.data;
switch (payload.event) {
case AuthEnum.SIGN_IN:
handleSignIn(user);
break;
case AuthEnum.SIGN_OUT:
handleSignOut();
break;
case AuthEnum.SIGN_IN_FAILURE:
handleSignInFailure();
break;
}
});
return () => unsubscribe();
}, []);
When I try to authenticate using GitHub, the GitHub API returns the correct token but the aws Hub catches a SIGN_IN_FAILURE and the data looks like this:
{
"channel": "auth",
"payload": {
"event": "signIn_failure",
"data": {},
"message": "The OAuth response flow failed"
},
"source": "Auth",
"patternInfo": []
}
I'm not sure why this is happening. A solution could be to remove the listener in case of GitHub auth, but I'm not sure how to do that since the InAppBrowser.openAuth() is used for both the Google SSO and GitHub auth.
Make sure to let me know if the info I provided isn't enough. Any suggestions/help would be great!
I don't think AWS Amplify support github oauth. I believe the supported ones are: Google, Apple, Facebook & Amazon
Supported social logins

XCRF Token Axios / Nuxt plugin - 403 Forbidden

I've been searching for solution since few hours and not able to find any.
Doing post request via axios nuxt plugin is not working as expected:
nuxt.config.js file:
axios: {
debug: true,
baseURL: `${process.env.API_PROTOCOL}://${process.env.API_HOST}${process.env.API_PORT ? `:${process.env.API_PORT}` : ''}${process.env.API_PREFIX}`,
},
axios plugin:
export default function ({
$axios, redirect, store,
}) {
$axios.setHeader('Content-Type', 'application/json');
$axios.setHeader('Accept', 'application/json');
$axios.onRequest((config) => {
const configLocal = config;
const { jwt } = store.state.authentication;
if (jwt) {
configLocal.headers.JWTAuthorization = `Bearer ${jwt}`;
}
if (config.method === 'post') {
configLocal.headers['X-Requested-With'] = 'XMLHttpRequest';
configLocal.headers['X-XSRF-TOKEN'] = store.state.authentication.crfToken;
}
});
}
And call methods:
authenticateUser({ commit }, { data }) {
return this.app.$axios.$post('auth/login', data).then(({ token }) => {
this.$cookies.set('jwt', token);
commit('setAction', { key: 'jwt', value: token });
}).catch(e => console.log(e));
},
getCRFToken({ commit }) {
return this.app.$axios.$get('auth/token').then(({ token }) => {
this.$cookies.set('crf', token);
commit('setAction', { key: 'crfToken', value: token });
});
},
The getCRFTToken works like a charm by returning CSRF token:
Request URL: http://127.0.0.1:8080/auth/token
Request Method: GET
Status Code: 200
Remote Address: 127.0.0.1:8080
Referrer Policy: no-referrer-when-downgrade
{"token":"92618f1e-0ed3-472b-b6a9-db2201a02d86"}
But whenever I do login...
It fails. Was digging in github - trying to set X-XSRF-TOKEN header in many places, but nope - still doesn't work. Anyone know the solution for this case ?
Edit
In the config folder there is shield.js file which config is blocking your route.
Set enable in csrf to false in the file.
It will start woking then.

How to get idToken from Expo GoogleSignIn API (expo v32)?

I am trying to setup native Google authentication on react-native using Expo GoogleSignIn API, but can't get idToken for authorized Google User.
It has accessToken in response, but not idToken.
So I am using some straigtforward code like
const result = await GoogleSignIn.initAsync({
isOfflineEnabled: true,
isPromptEnabled: true,
//webClientId: 'webClientId',
clientId // now testing only on Android, so this is irrelevant
});
console.log(result);
Example response:
Object {
"auth": Object {
"accessToken": "accessToken",
"accessTokenExpirationDate": null,
"idToken": null, // here is the problem!
"refreshToken": null,
},
"displayName": "Danila Tsvetkov",
"email": "email#email",
"firstName": "Danila",
"hostedDomain": undefined,
"lastName": "Tsvetkov",
"serverAuthCode": null,
"uid": "uid",
}
At the same time Google OAuth API returns not only accessToken, but also idToken and refreshToken.
Everything else works fine, like authorization and sign in flow.
Maybe the problem is with serverAuthCode?
Tried to put webClientId, api stops working properly. Added SHA1 to google-services (more info), didn't help. Changing other params like "isOfflineEnabled" also doesn't do much.
Can you use this
const result = await Google.logInAsync({
androidClientId: "android id"
iosClientId: 'Ios Id',
scopes: ['profile', 'email'],
});
then
if (result.type === 'success') {
console.log(result.idToken);
//or
Alert.alert(result.idToken);
}
if (result.type === 'success') {
console.log(result.user.auth);
}
this is because we are using google-sign-in, instead of expo-google-app-auth
so in conclusion, use result.user.auth, but before that, your code should look something like this
signInAsync = async () => {
try {
await GoogleSignIn.askForPlayServicesAsync();
const result = await GoogleSignIn.signInAsync();
if (result.type === 'success') {
this.onSignIn(result.user.auth);
return result.user.auth;
}
} catch ({ message }) {
alert('login: Error:' + message);
}
};

react native expo:Google auth does not return user data

I am following the process in official documentation here
https://docs.expo.io/versions/latest/sdk/google
My source code looks like this
export async function signInWithGoogleAsync() {
try {
const result = await Expo.Google.logInAsync({
androidClientId: '272284064749-p61ji1pgisvk1d5s2k7kc56kch0vssi9.apps.googleusercontent.com',
// iosClientId: '272284064749-p61ji1pgisvk1d5s2k7kc56kch0vssi9.apps.googleusercontent.com',
scopes: ['profile', 'email'],
});
if (result.type === 'success') {
return getUserInfo(result.accessToken);
} else {
return {cancelled: true};
}
} catch(e) {
return {error: true};
}
}
Get user information:
async function getUserInfo(accessToken) {
let Info = await fetch('https://www.googleapis.com/userinfo/v2/me', {
headers: { Authorization: `Bearer ${accessToken}`},
});
return console.log(JSON.stringify(Info));
}
Surprisingly, instead giving user data it logs this to console
{"type":"default","status":200,"ok":true,"headers":{"map":{"alt-svc":"quic=\":443\"; ma=2592000; v=\"44,43,39,35\"","x-content-type-options":"nosniff","cache-control":"public, max-age=0","x-frame-options":"SAMEORIGIN","server":"ESF","vary":"Referer","date":"Thu, 25 Oct 2018 05:14:19 GMT","x-xss-protection":"1; mode=block","content-type":"application/json; charset=UTF-8","expires":"Mon, 01 Jan 1990 00:00:00 GMT"}},"url":"https://www.googleapis.com/userinfo/v2/me","_bodyInit":{"_data":{"size":370,"offset":0,"blobId":"bfbedf5e-e2d7-45f0-b97c-483f814307dc"}},"_bodyBlob":{"_data":{"size":370,"offset":0,"blobId":"bfbedf5e-e2d7-45f0-b97c-483f814307dc"}}}
Expo 26.0.0 onward, the google user info comes as a part of the result object.
Just as you can access result.accessToken, you can access the user info with result.user.
Hope it helps you and anyone else who faces this issue.

Google api revoke token issue

I've created an application using google drive API to list and manage all my drive files.
Everything goes fine, except the log out part. I've searched for two days for a solution without a result.
The following is code related to login and works fine:
function checkAuth() {
gapi.auth.authorize(
{
'client_id': CLIENT_ID,
'scope': SCOPES.join(' '),
'immediate': true,
'authuser': '-1'
}, handleAuthResult);
}
function handleAuthResult(authResult) {
var authorizeDiv = document.getElementById('authorize-div');
if (authResult && !authResult.error) {
// Hide auth UI, then load client library.
authorizeDiv.style.display = 'none';
loadDriveApi();
} else {
authorizeDiv.style.display = 'inline';
}
}
function handleAuthClick(event) {
gapi.auth.authorize(
{client_id: CLIENT_ID, scope: SCOPES, immediate: false},
handleAuthResult);
return false;
}
function loadDriveApi() {
gapi.client.load('drive', 'v2', listFiles);
}
I'm able to login and work with files, but when I try to logout with following I get No 'Access-Control-Allow-Origin' error
$(document).on('click', '.logout', function(){
var token = gapi.auth.getToken();
if (token) {
var accessToken = gapi.auth.getToken().access_token;
if (accessToken) {
var revokeToken = 'https://accounts.google.com/o/oauth2/revoke?token=' + accessToken;
jQuery.getJSON(revokeToken).success(function(data) {
console.log(data);
}).error(function(message) {
console.error('error' + message);
}).complete(function() {
console.log('completed!');
});
}
}
gapi.auth.setToken(null);
gapi.auth.signOut();
});
In Google Developers Console I've regitred my website to Authorized JavaScript origins.
Thanks