My app is using Instagram's REST API, in order for a user to logout and login with a different account I have to clear the cookies for www.instagram.com from the browser. I have been using react-native-cookie with RN 0.59.10 and it has been working fine.
After upgrading to RN 0.60 I can't use the react-native-cookie or any of its alternate packages because they don't support auto-linking. The solution I have found is using the RCTNetworking module from the react-native library. You can see the solution here.
Code
var RCTNetworking = require('RCTNetworking');
export const logout = () => {
return new Promise((resolve, reject) => {
RCTNetworking.clearCookies(result => {
if (!result) {
console.log('Error Message');
reject()
}
store.dispatch({ type: "RESET_APP_STATE" });
NavigationService.navigate("AuthLoading");
resolve()
});
});
};
The code runs fine. The app's state is cleared and the user is navigated to the login screen, but when I open the Instagram page in the webView instead of asking for the username and password, it directly logs me in.
You should use the community-version of react-native-cookies which can be found here: https://github.com/react-native-community/react-native-cookies
I am happily using this in combination with version 0.61.5 of React-Native.
Related
I am trying to implement an authentication login method through Azure AD with Firebase on my Expo app.
Here is an extraction of my code, which looks exactly like the Firebase documentation:
const signInWithMicrosoft = () => {
const auth = initializeAuth(firebaseApp);
signInWithPopup(auth, provider)
.then((result) => {
const credential = OAuthProvider.credentialFromResult(result);
const accessToken = credential.accessToken;
const idToken = credential.idToken;
navigation.navigate("Home")
})
.catch((error) => {
// Handle error.
});
}
When pressing the button to activate the function, the following error message shows up:
TypeError: (0, _auth.signInWithPopup) is not a function. (In '(0, _auth.signInWithPopup)(auth, provider)', '(0, _auth.signInWithPopup)' is undefined)
I tried importing the functions as:
import { signInWithPopup } from "firebase/auth"
and
import { signInWithPopup } from "firebase/compat/auth"
And neither of them seem to work.
Is there any way I can get this function to work, or the solution would be going another way around? I don't know if functions such as SignInWithPopup and SignInWithRedirect are supported in Expo, since it is a Mobile application.
If you have any tip, clue or information on using firebase auth methods in a Expo app, please share below and I will be very happy to read it and comment on.
I need to find out the deeplink of create room page of pubg mobile.
Like the app opens to the create room page when clicked on a button.
Try this Library
"Easily deep link to other apps in React Native. If the app isn't installed on the user's phone, open the App Store or Play Store link instead."
https://github.com/FiberJW/react-native-app-link
npm i -S react-native-app-link
import AppLink from 'react-native-app-link';
AppLink.maybeOpenURL(url, { appName, appStoreId, appStoreLocale, playStoreId }).then(() => {
// do stuff
})
.catch((err) => {
// handle error
});
AppLink.openInStore({ appName, appStoreId, appStoreLocale, playStoreId }).then(() => {
// do stuff
})
.catch((err) => {
// handle error
});
I have updated my app on app and play store and I want to force my app users to update the new version of app in App store and playstore.
You can check for the App Store / Play Store version of your app by using this library
react-native-appstore-version-checker.
In expo app you can get the current bundle version using Constants.nativeAppVersion. docs.
Now in your root react native component, you can add an event listener to detect app state change. Every time the app transitions from background to foreground, you can run your logic to determine the current version and the latest version and prompt the user to update the app.
import { AppState } from 'react-native';
class Root extends Component {
componentDidMount() {
AppState.addEventListener('change', this._handleAppStateChange);
}
_handleAppStateChange = (nextState) => {
if (nextState === 'active') {
/**
Add code to check for the remote app version.
Compare it with the local version. If they differ, i.e.,
(remote version) !== (local version), then you can show a screen,
with some UI asking for the user to update. (You can probably show
a button, which on press takes the user directly to the store)
*/
}
}
componentWillUnmount() {
AppState.removeEventListener('change', this._handleAppStateChange);
}
}
import VersionCheck from 'react-native-version-check';
i have used version check lib for this purpose and approach i used is below. if version is lower i'm opening a modal on which an update button appears, and that button redirects to app store/google play
componentDidMount() {
this.checkAppUpdate();
}
checkAppUpdate() {
VersionCheck.needUpdate().then(res => {
if (res.isNeeded) {
setTimeout(() => {
this.setState({openModal: true});
});
}
});
}
updateApp = () => {
VersionCheck.getStoreUrl({
appID: 'com.showassist.showassist',
appName,
})
.then(url => {
Linking.canOpenURL(url)
.then(supported => {
if (!supported) {
} else {
return Linking.openURL(url);
}
})
.catch(err => console.error('An error occurred', err));
})
.catch(err => {
console.log(`error is: ${err}`);
});
};
For future readers.
If you are using Expo managed workflow, install this package react-native-version-check-expo using yarn add react-native-version-check-expo or npm install react-native-version-check-expo.
Consult the package documentation on Github for usage guidelines.
I'm using react-native-version-check-expo library to achieve this. Working fine for me.
if you are looking for an easy to integrate built in solution. You can use App Upgrade https://appupgrade.dev/ service to force update your mobile apps.
Create new version entry for your app version that you want to update in the app upgrade service and select whether you want to force it or just want to let users know that new version is available.
Integrate your app with App Upgrade using available SDK. Official SDK are available for React Native, Flutter, Expo, Android and iOS(Swift).
The SDK will take care of the rest.
Whenever you want to force upgrade a version just create a version entry in app upgrade dashboard.
You can also integrate using API. Just call the appupgrade api from your app with the required details such as your app version, platform, environment and app name.
The API will return you the details.. that this app needs to be updated or not.
Based on the response you can show popup in your app.You can call this API when app starts or periodically to check for the update. You can even provide a custom message.
API response:
See the response has force update true. So handle in the app by showing popup.
You can find the complete user documentation here. https://appupgrade.dev/docs
Thanks.
I am using react-native-fbsdk to login through facebook on my react-native app.
I call LoginManager.logOut() to logout: it does not actually properly logout since the next time I try to login, it does not ask me for login/password again so I can only login on one account. I can not find a way to login to another facebook account.
This guy (react-native-fbsdk: How properly log out from facebook?) had the same problem and seem to have found no solution.
One trick on iOS is to go to safari then logout from the mobile facebook website. This does not work on android though :(
EDIT:
Here is my facebook login code:
function login() {
return LoginManager.logInWithReadPermissions(FACEBOOK_PERMISSIONS)
.then(result => {
if (result.isCancelled) {
throw new Error("Login canceled");
}
return AccessToken.getCurrentAccessToken();
})
.then(({ accessToken }) => accessToken);
}
Video of logout/login: https://d3vv6lp55qjaqc.cloudfront.net/items/132L2U1p383E1y0l2l2v/Screen%20Recording%202018-10-31%20at%2002.52%20PM.mov
So I found this solution, that is not a hack but the proper way to perform a logout on facebook. You need to create a GraphRequest to ask a deletion of permissions.
Below the code, I hope that will help you. I test it on Android and IOS, and that work like a charm.
FBLogout = (accessToken) => {
let logout =
new GraphRequest(
"me/permissions/",
{
accessToken: accessToken,
httpMethod: 'DELETE'
},
(error, result) => {
if (error) {
console.log('Error fetching data: ' + error.toString());
} else {
LoginManager.logOut();
}
});
new GraphRequestManager().addRequest(logout).start();
};
The problem is not with react-native-fbsdk but with Facebook or the browser through which the user logs in to connect to your app, the reason being every-time your app accesses the Facebook login through the browser or the Facebook app where the user-account is already logged-in, which is why it doesn't show you username or password fields.
To solve this issue, the user must logout from the browser or Facebook through which he/she logged in (for app permission initially) to your app, so when the user comes back to your app and selects the Facebook-login option, assuming user logged-out of your app as well, then he/she can see it redirecting to the Facebook or browser login page with username and password fields.
I've been trying to build a react native app that requires users to authenticate with their Instagram account. The Instagram API has a authorisation link and perhaps the only way to display that in an app would be through 'WebView' and so I used that.
The authentication workflow runs smoothly and then my server even gets the access token and user-id. But the problem is how to send this access token back to the app? I've used express-js for the 'redirect-uri' and so the WebView makes request to app.get() handler. In order to send response to same client on which the connection is opened, we must use res.send(). This would send the response to WebView, let's say I capture that using 'injectedJavaScript' but this javascript runs within WebView and so its unable to access react-native variables. In the event of a correct access-token, how would I ever navigate away from the WebView?
Any solutions to the above problems would be greatly appreciated. I suspect that there might even be problems with this approach(in my choice of WebView for this purpose, etc.), so a change of approach even entirely would also be of help. All I want is to authenticate the app users with Instagram and get my project going. Thanks a lot.
If you are using Expo, you can use AuthSessions to accomplish this (https://docs.expo.io/versions/latest/sdk/auth-session). The exact way to do it depends on whether you are using a managed workflow or a bare workflow, etc., but for managed workflow you can do the following:
Go to the Facebook Developer's console, go to your app, and add the Instagram Basic Display product.
Under Instagram Basic Display, under Valid OAuth Redirect URIs, use https://auth.expo.io/#your-expo-username/your-project-slug (project slug is in your app.json file)
On the same FB Developer page, add an Instagram tester profile and then follow the steps to authenticate that user.
In your project, install expo install expo-auth-session and import it into your Component
Also install expo-web-browser
Code your component like so:
import React, { useEffect } from 'react';
import { Button, Platform, Text, TouchableOpacity, View } from 'react-native';
import * as WebBrowser from 'expo-web-browser';
import { useAuthRequest, makeRedirectUri } from 'expo-auth-session';
WebBrowser.maybeCompleteAuthSession(); // <-- will close web window after authentication
const useProxy = Platform.select({ web: false, default: true });
const client_id = 9999999999999;
const redirect_uri = "https://auth.expo.io/#your-expo-username/your-project-slug";
const scope = "user_profile,user_media";
const site = "https://api.instagram.com/oauth/authorize?client_id=" + client_id + "&redirect_uri=" + redirect_uri + "&scope=" + scope + "&response_type=code&state=1";
const discovery = { authorizationEndpoint: site }
const GetInstagram = () => {
const [request, response, promptAsync] = useAuthRequest({
redirectUri: makeRedirectUri({
useProxy,
native: redirect_uri
}),
scopes: [scope],
clientId: client_id
}, discovery);
useEffect(() => {
if (response?.type === 'success') {
const { code } = response.params; <--- the IG code will be returned here
console.log("code : ", code);
}
}, [response]);
return (
<View>
<TouchableOpacity onPress={ () => promptAsync({useProxy,windowFeatures: { width: 700, height: 600 }}) }>
<Text>Connect Your Instagram</Text>
</TouchableOpacity>
</View>
)
}
export default GetInstagram;
One way to accomplish this is via using deeplink. I don't think it's the best practice though.
The response from the WebView will be sent to the redirect URL you've previously setup after successful authentication. Please set the redirect URL to your app. For example, on iOS if you have URL Scheme as "myapp123" then, anytime you open your browser and type myapp123://.. it will open your app and your app should be able to get response sent from the instagram.