I am trying to set up google oauth in a react native, expo managed app. I am only having the following issue using my app within Expo Go - when I create a build of the app, the oauth flow works perfectly. But its hard to develop that way, and I need to be able to share a working app with non-dev team members via Expo Go. I have set up the flow in what I think is the same as what the expo go google auth documentation has described. An overview
Create a project in google console, and set up a new ClientID for web applications. Set the authorized origins and redirect uri:
Where myorg is the name of the expo organizational account that owns the project, and projectname is the same value as slug in app.json.
After setting this up, I get the client id, and client secret for this oauth login method.
In my app code, I follow the instructions to use the expo-auth-session library for google:
import * as WebBrowser from "expo-web-browser";
import * as Google from "expo-auth-session/providers/google";
WebBrowser.maybeCompleteAuthSession();
export const OAuthButtons: React.FC = () => {
const [request, response, promptAsync] = Google.useAuthRequest({
expoClientId: "clientId-from-google-console.apps.googleusercontent.com",
iosClientId: "will set this up eventually",
androidClientId: "will set this up eventually",
});
return; // markup for sign in buttons
}
So now in my app, when I click the google sign in button, I get the prompt to open the web browser correctly:
Clicking that correctly opens the expo web browser, but I see a "not found" message:
For more details, when I log the request, I get some pretty expected values
"{
"url": "https://accounts.google.com/o/oauth2/v2/auth?redirect_uri=https%3A%2F%2Fauth.expo.io%2FMyProject&client_id=id-from-console.apps.googleusercontent.com&response_type=token&state=5xWG83SsoJ&scope=openid%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.profile%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.email",
"responseType": "token",
"clientId": "client-id-from-console.apps.googleusercontent.com",
"redirectUri": "https://auth.expo.io/MyProject",
"scopes": [
"openid",
"https://www.googleapis.com/auth/userinfo.profile",
"https://www.googleapis.com/auth/userinfo.email"
],
"state": "5xWG83SsoJ",
"extraParams": {},
"codeChallengeMethod": "S256",
"usePKCE": false
}"
The only values here that are a bit unexpected are the redirectUri and redirect_uri, which have a /MyProject appended to them, which is not exactly what I had put in my redirect uri in the google console. How did that get appended there? Might that be the problem?
As far as I can tell, I've set everything up as described. What is it exactly that is "Not Found" here? The oauth page for this particular expo application? Where did I go wrong in my setup?
Edit - Same Problem with Facebook.useAuthRequest
I am having the same exact problem with the Facebook provider module as well. Similar code:
const [facebookRequest, facebookResponse, facebookPromptAsync] =
Facebook.useAuthRequest({
clientId: "facebook_app_id",
responseType: ResponseType.Code,
});
I also tried the suggestion from the article Use expo-auth-session with Facebook the Easiest Way on iOS/Android to add the useProxy: true property, but that makes no difference.
const [facebookRequest, facebookResponse, facebookPromptAsync] =
Facebook.useAuthRequest(
{
clientId: "facebook_app_id",
responseType: ResponseType.Code,
},
{ useProxy: true }
);
The facebook login also opens the expo browser to an empty page that says "Not found"
What am I doing wrong here?
Do you have your originalFullName specify on your app.json? If not, try to add it e.g originalFullName: "#your_username/your_app_name"
And maybe this github issue can help you, https://github.com/expo/expo/issues/19891.
I have a managed-expo (sdk 45) application and for some reason apple rejects my application because they are unable to locate the App Tracking Transparency permission request. I know it has something to do with expo-ads-admob. I am getting this message:
Please explain where we can find the App Tracking Transparency permission request in your app. The request should appear before any data is collected that could be used to track the user.
If you've implemented App Tracking Transparency but the permission request is not appearing on devices running the latest OS, please review the available documentation and confirm App Tracking Transparency has been correctly implemented.If your app does not track users, update your app privacy information in App Store Connect to undeclare tracking. You must have the Account Holder or Admin role to update app privacy information.
I'm using expo-ads-admob and this is how I did it (docs):
I installed expo-tracking-transparency
and added the function on the first part of the application (App.tsx)
import * as React from "react";
import { requestTrackingPermissionsAsync } from "expo-tracking-transparency";
export default function App() {
React.useEffect(() => {
(async () => {
const { status } = await requestTrackingPermissionsAsync();
if (status === "granted") {
console.log("Yay! I have user permission to track data");
}
})();
}, []);
return (
<MainApplication />
);
}
I also added
"plugins": [
[
"expo-tracking-transparency",
{
"userTrackingPermission": "This identifier will be used to deliver personalized ads to you."
}
]
]
To app.json
Then I use the component (everywhere in the app) like this:
<AdMobBanner
bannerSize={
Platform.OS === "ios" ? "fullBanner" : "smartBannerLandscape"
}
adUnitID={
Platform.OS == "ios"
? "IOS_ADMOB_CODE"
: "ANDROID_ADMOB_CODE"
}
servePersonalizedAds={false}
onDidFailToReceiveAdWithError={() => {}}
onAdViewDidReceiveAd={() => {}}
/>
It works, but iOS keep rejecting my application claiming they can't find the permission. I looked everywhere and saw this is the right way to implement this but unfortunately it didn't work.
Thanks in advance!
if you dont have infoplist go to and add the Description here.
enter image description here
I want to use Jitsi-meet in react native for video conferencing what is the best method for implementation.
Currently I am following this link https://jitsi.github.io/handbook/docs/intro
But in this they have used native code for android and iOS
Can someone please suggest me how should I proceed further.
The link you provided is the documentation of the jitsi native SDK. If you want to implement this SDK in a react-native project, you should have a look at react-native-jitsi-meet plugin.
As you can read in the documentation of the plugin, just install the plugin, and you will be able to initiate calls with your room url :
componentDidMount() {
setTimeout(() => {
const url = 'https://your.jitsi.server/roomName'; // can also be only room name and will connect to jitsi meet servers
const userInfo = { displayName: 'User', email: 'user#example.com', avatar: 'https:/gravatar.com/avatar/abc123' };
JitsiMeet.call(url, userInfo);
/* You can also use JitsiMeet.audioCall(url) for audio only call */
/* You can programmatically end the call with JitsiMeet.endCall() */
}, 1000);
}
I have a react native mobile app with a webview. In the webview I added the facebook messenger chat plugin so my users can easily contact us if they need help.
if you ran the website through a mobile browser it works. It redirects you to the official messenger.
But when you ran it through react native webview somehow it says No activity found to handle Intent
here is my code on how i handle the opening of the intent
onShouldStartLoadWithRequest={(request) => {
let url = request.url
if(url.startsWith('intent:')){
Linking.openURL(url).catch(er => {
console.log(er)
alert("Failed to open URL")
});
return false
}else{
return true
}
}}
this will console log
[Error: Could not open URL
'intent://user/107571147455693/?intent_trigger=mme&nav=discover&source=customer_chat_plugin&source_id=1507329&metadata=%7B%22referer_uri%22%3A%22https%3A%5C%2F%5C%2Ffusiontechph.com%5C%2Ff9fe1863270a2%22%7D#Intent;scheme=fb-messenger;package=com.facebook.orca;end':
No Activity found to handle Intent { act=android.intent.action.VIEW
dat=intent://user/107571147455693/?intent_trigger=mme&nav=discover&source=customer_chat_plugin&source_id=1507329&metadata={"referer_uri":"https://fusiontechph.com/f9fe1863270a2"}
flg=0x10000000 }]
I have a workaround that worked for me. Facebook messenger provides a link to your facebook page message. So you can just open that link directly without using the intent scheme of facebook here is the final code
onShouldStartLoadWithRequest={(request) => {
let url = request.url
if(url.startsWith('intent:')){
Linking.openURL('https://m.me/mluc.jsites').catch(e=>{
console.log(e) })
return false
}else{
return true
}
}}
I used redirectUrl and it's working fine in local development but when i create a Realease apk after it's not working it's redirect to google page.
const result = await Google.logInAsync({
androidClientId:'31022361841-7431bfbrm8qidpd9l7m9cldn1vd3nl65.apps.googleusercontent.com',
androidStandaloneAppClientId:'874376514949-m5f77i8pp4dub997jm664pfljle1bu9k.apps.googleusercontent.com',
redirectUrl: `${AppAuth.OAuthRedirect}:/oauthredirect`
scopes: ['profile', 'email'],
});