I am trying to implement a login with Facebook in my Ionic app. I built an apk and run it on my Android phone, and when I press the login button it takes about one minute to login and sometimes does not even work. Here is the function:
facebookLogin(){
if(this.platform.is('cordova')){
Facebook.login(['email', 'public_profile']).then((res) => {
const facebookCred = firebase.auth.FacebookAuthProvider.credential(res.authResponse.accessToken);
firebase.auth().signInWithCredential(facebookCred).then((res) => {
let currentUser = firebase.auth().currentUser;
window.localStorage.setItem('currentUser', JSON.stringify(currentUser));
this.navCtrl.pop();
},(err) => {
alert('Login not successful: ' + err);
});
});
}}
I hope someone can tell me why that is happening and suggest a fix for it. Thank you for your time!
Related
I am trying to integrate Azure AD authentication with my Electron App (with Angular). I took reference from this link and able to integrate: https://learn.microsoft.com/en-us/azure/active-directory/develop/tutorial-v2-nodejs-desktop
Issue: It's using getTokenInteractive() method and it's navigating to an external browser. As per my requirement we don't have to navigate to an external browser, it should open the UI inside my electron App where end users can provide their credentials.
Another option if possible we can open the Azure AD url part of my electron App.
I took reference from this link and able to integrate: https://learn.microsoft.com/en-us/azure/active-directory/develop/tutorial-v2-nodejs-desktop
async getTokenInteractive(tokenRequest) {
try {
const openBrowser = async (url) => {
await shell.openExternal(url);
};
const authResponse = await this.clientApplication.acquireTokenInteractive({
...tokenRequest,
openBrowser,
successTemplate: '<h1>Successfully signed in!</h1> <p>You can close this window now.</p>',
errorTemplate: '<h1>Oops! Something went wrong</h1> <p>Check the console for more information.</p>',
});
return authResponse;
} catch (error) {
throw error;
}
}
I am using the MERN stack on a site where I use JWT for register/login. I've set up Google login using react-google-login on my site. On the localhost, everything works fine.
When I deployed to Heroku, I initially got zero response from pressing the button and an error of a redirect-URI-mismatch. So I went into my google developer account and added the Heroku page to the authorized javascript origins.
Currently, the Google login opens and everything appears successful....at first. The initial response (the first logged 'response' shown below) to Google shows up. So I'm getting a code returned.
function GoogleOAuth({ setSignedIn }) {
const responseGoogle = (response) => {
console.log('response', response);
const { code } = response;
if (code) {
axios
.post("/api/users/create-tokens", { code })
.then((res) => {
console.log(res.data);
toast.success("Success! You're connected to Google!")
})
.catch((err) => console.log(err.message));
}
};
In the associated google account, it shows that this app now has access. The problem arises at the second part - where it says if(code). Again, the call to the backend works fine locally but in Heroku it appears 'stuck' here and then the message in the console is redirect uri mismatch. I tried putting in the backend api address to the developer console's redirect uri section but that didn't work. Anyone have any idea what is going on at this point in Heroku? I really can't figure it out.
<GoogleContainer>
<Logo src={GoogleLogo} />
<GoogleLogin
clientId= {CLIENT_ID}
render={(renderProps) => (
<GoogleBtn
onClick={renderProps.onClick}
disabled={renderProps.disabled}
style={styleObj}
>
Connect to Google
</GoogleBtn>
)}
onSuccess={responseGoogle}
isSignedIn={true}
onFailure={responseError}
cookiePolicy={"single_host_origin"}
responseType='code'
accessType='offline'
scope='openid email profile https://www.googleapis.com/auth/calendar'
/>{" "}
</GoogleContainer>
);
I am working developing a react PWA offline mode feature. Everything works fine as expected in development. When I set the network offline the app is working fine as expected(even we hit the refresh in offline the app is working) but after creating the build and deployed offline feature is not working when I hit the refresh. Below is my service worker code.
let cacheData = "appV1";
//console.log("SW file from public folder..");
this.addEventListener("install", (event) => {
event.waitUntil(
caches.open(cacheData).then((cache) => {
cache.addAll([
'/static/js/main.chunk.js',
'http://localhost:3000/static/js/vendors~main.chunk.js',
'/static/js/bundle.js',
'https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic&subset=latin',
'/index.html',
'/read',
'/'
])
})
)
})
this.addEventListener("fetch", (event) =>{
if(!navigator.onLine)
{
event.respondWith(
caches.match(event.request).then((resp) =>{
if(resp)
{
return resp;
}
let requestUrl = event.request.clone();
fetch(requestUrl);
})
)
}
})
need suggestion mates.
Try to go online and take a look into Network Panel in Dev-Tools. Than you will see which pages are missed. I think its caused by the react chunk-names... Maybe you can use precacheAndRoute()-function from workbox-tool.
Also i think you dont need this line: if(!navigator.onLine){}
I am trying to test my React (v16.10.2) application with Cypress (v4.5.0). Our application is using Okta for authentication (with the client #okta/okta-react 1.3.1).
I can use my app from the browser without any issues. The first time I login, I get the Okta login screen. I enter my user ID and password, and the react client calls the authn endpoint with my creds, and then calls the authorization endpoint to get the token. I am then taken to the first screen of our application.
When I try to login in my Cypress test, my user ID and password are entered into the login screen, the authn endpoint is called successfully, but the authorization endpoint returns a 403 error. Unfortunately, there is no other info about why I am getting the 403.
I have compared the authorization requests between the one that works in the browser, and the one that doesn't work from Cypress. The only real difference I see is that the working browser request has an origin header, whereas the failing one does not.
Question #1: Could the missing origin header be the cause of my problem?
In order to avoid a bunch of CORS and cross-site issues, I had to install a couple Chrome extensions (ignore-x-frame-headers and Access-Control-Allow-Origin-master). I am implementing them in the following code in cypress/plugins/index.js:
module.exports = (on, config) => {
on('before:browser:launch', (browser = {}, launchOptions) => {
// The following code comes from https://medium.com/#you54f/configuring-cypress-to-work-with-iframes-cross-origin-sites-afff5efcf61f
// We were getting cross-origin errors when trying to run the tests.
if (browser.name === 'chrome') {
const ignoreXFrameHeadersExtension = path.join(__dirname, '../extensions/ignore-x-frame-headers');
launchOptions.args.push(`--load-extension=${ignoreXFrameHeadersExtension}`);
const accessControlAllowOriginMasterExtension = path.join(__dirname, '../extensions/Access-Control-Allow-Origin-master');
launchOptions.args.push(`--load-extension=${accessControlAllowOriginMasterExtension}`);
launchOptions.args.push("--disable-features=CrossSiteDocumentBlockingIfIsolating,CrossSiteDocumentBlockingAlways,IsolateOrigins,site-per-process");
launchOptions.args.push('--disable-site-isolation-trials');
launchOptions.args.push('--reduce-security-for-testing');
launchOptions.args.push('--out-of-blink-cors');
}
if (browser.name === 'electron') {
launchOptions.preferences.webPreferences.webSecurity = false;
}
return launchOptions;
});
I also added the following to cypress.json:
{
"chromeWebSecurity": false
}
Here is my cypress test:
describe('Order Lookup Test', () => {
const UI_URL: string = 'http://localhost:3000/';
const ORDER_NUMBER: string = '10307906234';
beforeEach(() => {
Cypress.config('requestTimeout', 50000);
cy.visit(UI_URL);
cy.get('#okta-signin-username', {timeout: 10000}).type('xxxxxxxx');
cy.get('#okta-signin-password', {timeout: 10000}).type('xxxxxxxx');
cy.get('#okta-signin-submit', {timeout: 10000}).click();
})
it('should return an order', () => {
cy.get('.number-input', {timeout: 10000}).type(ORDER_NUMBER);
cy.get('.order-lookup-buttons-search-valid').should('be.visible').click();
})
})
Does anyone have any idea what might be going on? What other information should I be including in order to help narrow this down?
what's wrong with this picture ?
import firebase from 'firebase';
onButtonPress() {
const { email, password } = this.state;
firebase.auth().signInWithEmailAndPassword(email, password)
.catch(() => {
firebase.auth().createUserWithEmailAndPassword(email, password)
.catch(() => {
this.setState({ error: 'Authentication Failed' });
});
});
}
And so that we're clear:
Yes it's installed in the framework when I built the app. And yes I'm calling it on the same page where this is being executed. And yes the app runs fine without this section of code. there are no coding errors, nor logic errors.
If I wanted to a.) debug this bit of code how would I do that ? and b.) where would I add the console.log statement ? I know it has to live somewhere....like here >
firebase.auth().signInWithEmailAndPassword(console.log(email, password)) ??
Shouldn't a call like these to firebase work like this ?
Thanks ahead of time.
Miles.
Oy! When I called the function to press the button I had set up. I had written onButtonPress instead of onPress....grrrrrrrrr! Sorry to bother everyone. All is well now.
You need to add firebase to your application, there are specific steps mentioned on their site. The site has information no how to call firebase for email authentication.