Expo-Auth session is not working properly - react-native

While implementing google login using the expo-auth-session package , I am getting some error that i don't have any idea about, It has been more than one day since i am stuck in this problem i cannot find a reliable source to use for implementing google login in my expo application. Is there any other way i can implement it in the react native expo application.
The error i am getting are :
WARN Linking requires a build-time setting `scheme` in the project's Expo config (app.config.js or app.json) for production apps, if it's left blank, your app may crash. The scheme does not apply to development in the Expo client but you should add it as soon as you start working with Linking to avoid creating a broken build. [Learn more][1]:
WARN EventEmitter.removeListener('url', ...): Method has been deprecated. Please instead use `remove()` on the subscription returned by `EventEmitter.addListener`.
WARN Possible Unhandled Promise Rejection (id: 2):
Error: Exception in HostFunction: Malformed calls from JS: field sizes are different.
What should i do ??
The link to the documentation that i followed is :-
And this is what i used from the documentation.
import * as Google from "expo-auth-session/providers/google";
import * as WebBrowser from "expo-web-browser";
WebBrowser.maybeCompleteAuthSession();
const [request, response, promptAsync] = Google.useAuthRequest({
expoClientId: expoClientId,
});
const login = ()=>{
useEffect(() => {
if (response?.type === "success") {
const { authentication } = response;
console.log(authentication);
}
}, [response]);
return (
<Pressable style={styles.btn} onPress={promptAsync}>
<Image
source={require("../../../assets/g1.png")}
style={styles.img}
/>
<Text style={styles.text}>Sign in with Google</Text>
</Pressable>
)
}
thank you any help would be appriciated.

In your app.json add following
"scheme":"com.yourpackage.yourapp"
this value must be same as your android.package and ios.bundleIdentifier

Related

Issue with Expo CLI environment setup in windows (Solved). Registering for account in expo failed with firebase & Styling issue(New question)

I am having a issue on react native. This is my first time using so I am following a guide from https://www.youtube.com/watch?v=f6TXEnHT_Mk. According to the video, after npm start, I am suppose to arrive with a browser opened that look like:
But it did not happen on my laptop. When I tried to copy the link in the terminal to a browser, I get this instead:
Can anyone explain to me what did I do wrong? I have double checked everything and is the same as the video till this point. In the video for this to appear the window defender firewall was blocking the feature so the user allow access for that. But my firewall seems to not be blocking it
Having error logging in expo via terminal:
Solved
I am currently following a guide which is from https://www.youtube.com/watch?v=ql4J6SpLXZA
I am doing the login UI and around the 8 min mark, i decided to take a short break. After coming back, I continued till the 9 min mark and i am met with this:
Tried to remove the code I newly added but the problem still did not go away.
Referring to Unable to resolve "../../App" from "node_modules/expo/AppEntry.js", tried to add
"sourceExts": [ "js", "json", "ts", "tsx", "jsx", "vue"]
in the app.json file but I do not have the
packageOpts line in the file. How do i solve this?
Solved
I am still following the guide above: https://www.youtube.com/watch?v=ql4J6SpLXZA.
Now I am having issue with firebase. As stated in the video, it is for firebase 8 and I am using firebase 9 so I used the code provided by firebase:
// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
const firebaseConfig = {
apiKey: "AIzaSyDI9Ggk4h-bHBSDjZAZgMaB6Ur_lvJIPKw",
authDomain: "fypapp-4f10a.firebaseapp.com",
projectId: "fypapp-4f10a",
storageBucket: "fypapp-4f10a.appspot.com",
messagingSenderId: "306492584822",
appId: "1:306492584822:web:24b7ccb717a107df6b4057"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
With this I was having an error of
Unable to resolve "idb" from "node_modules\#firebase\app\dist\esm\index.esm2017.js"
And I found a answer from online to bypass that by creating metro.config.js with the code: (This is for future user that is having trouble with this error)
const { getDefaultConfig } = require("#expo/metro-config");
const defaultConfig = getDefaultConfig(__dirname);
defaultConfig.resolver.assetExts.push("cjs");
module.exports = defaultConfig;
But now I am having another error when creating new user. I have the following error :
TypeError: undefined is not an object (evaluating '_firebase.auth.createUserWithEmailAndPassword')
I searched around stack and no one has post error of
evaluating '_firebase.auth.createUserWithEmailAndPassword`
Is there something I can do to solve this?
Another problem I have is regarding the styling for the page,
I have this currently: (When i never attempt to type anything new in the input boxes)
When i try to type something new in the input boxes:
I have the following code: How do i correct it so that my keyboard can be seen and the input boxes can be seen at the same time?
<KeyboardAvoidingView //To prevent keyboard from blocking the writing area
style={styles.container}
behavior = "padding"
>
<View style = {styles.inputContainer}>
<TextInput
placeholder = "Email"
value={email}
onChangeText ={text => setEmail(text)}
styles = {styles.input}
/>
<TextInput
placeholder = "Password"
value={password}
onChangeText ={text => setPassword(text)}
styles = {styles.input}
secureTextEntry //Hide password
/>
</View>
<View style = {styles.buttonContainer}>
<TouchableOpacity
onPress = {() => { } }
style = {styles.button}
>
<Text style={styles.buttonText}>Login</Text>
</TouchableOpacity>
<TouchableOpacity
onPress = {handleSignUp}
style = {[styles.button, styles.buttonOutline]}
>
<Text style={styles.buttonOutlineText}>Register</Text>
</TouchableOpacity>
</View>
</KeyboardAvoidingView>
Update July 25, 2022: expo-cli#6.0.0 has been released with the web
UI removed. The last release to include the web UI is
expo-cli#5.5.1.
You can check this article in medium for more details from here.
Or you can check this old question from here.
I prefer to change the tutorial to one newer or just skip this detail and continue :D
For expo login try run this two commands and try again:
npm cache clean --force
npm install -g npm#latest --force

How to use "promptAsync" from expo-auth-session, old library used in video tutorial was deprecated

I have been following the tinder 2.0 react native tutorial https://youtu.be/qJaFIGjyRms At 1:04:00 he sets the sign in method to: "await Google.logInAsync()" but I have noticed the google app auth library used in the video is now deprecated, I am redirected to use expo auth session instead but I notice there is a slight difference, where they used "await Google.logInAsync()" I must put "promptAsync" instead, when I do this I get the error promptAsync is undefined, I try with google.loginasync and get the same error that it is still undefined, what should I do? screenshot
code:
import React, { createContext, useContext } from 'react'
//import * as Google from 'expo-auth-session/providers/google';
import * as Google from 'expo-google-app-auth';
const AuthContext = createContext({});
const config = {
androidClientId:
'236293699216-9a0nknjdq7ie79h40iubg0tddokgogfv.apps.googleusercontent.com',
iosClientId:
'236293699216-6jdpm0rd6kn5d0qlbh1vgva5afgbqgib.apps.googleusercontent.com',
scopes: ["profile", "email"],
permissions: ["public_profile","email", "gender", "location"],
}
export const AuthProvider = ({ children}) => {
const signInWithGoogle = async() => {
await Google.logInAsync(config).then(async (logInResult) => {
if (logInResult.type === "success") {
// login
}
});
};
return (
<AuthContext.Provider
value={{
user: null,
signInWithGoogle
}}
>
{children}
</AuthContext.Provider>
)
}
export default function useAuth() {
return useContext(AuthContext);
}
I sought help on the forum that belongs to the maker of the video and other people had come across the same issue, one person recommended to go into package.json find the installed dependencies and change “expo-google-app-auth” from “^10.0.0” to “~9.0.0” and then npm I in the terminal, I have done this and I'm now getting the error “no such file or directory /Users/shangefagan/twinder-3/node_modules/expo-google-app-auth/node-modules/react-native/package.json” I have changed it back to “^10.0.0” but still getting the same error, screenshot
do I just npm uninstall expo-google-app-auth and try to use expo-auth-session as I was originally trying? if so What is the correct way to use promptAsync from the expo-auth-session library
I check the docs for both libraries, expo google app auth: https://docs.expo.dev/versions/v43.0.0/sdk/google/ and expo auth session: https://docs.expo.dev/versions/latest/sdk/auth-session/ but I am unsure exactly how to use the new login method "promptAsync"
To use promptAsync you have to use the package expo-auth-session. Like you said expo-google-app-auth is deprecated.

Implementing app tracking transparency permission request on Expo 45

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

Expo useAuthRequest with devTools remote debugging throws error: Calling synchronous methods on native modules is not supported in Chrome

This has to be a common issue, but I can't find anyone else that's had this problem...
Using Expo SDK 42, if I try to enable remote debugging in my project while using Expo's AuthSession.useAuthRequest in the exact same format as the docs
https://docs.expo.dev/guides/authentication/#azure
// this is sample code from Expo, our implementation is basically identical
const [request, response, promptAsync] = useAuthRequest(
{
clientId: 'CLIENT_ID',
scopes: ['openid', 'profile', 'email', 'offline_access'],
redirectUri: makeRedirectUri({
scheme: 'your.app'
}),
},
discovery
);
return (
<Button
disabled={!request}
title="Login"
onPress={() => {
promptAsync();
}}
/>
);
The invocation of useAuthRequest throws this blocking error whenever opening remote debugging with Chrome
Invariant Violation: Calling synchronous methods on native modules is not supported in Chrome.
Consider providing alternative methods to expose this method in debug mode, e.g. by exposing constants ahead-of-time.
Removing the call to useAuthRequest clears the error, so I'm pretty sure that's the problem. But if that's commented out, then I can't debug anything past auth on the app... any ideas on how to get around this?

My React Native app crashes during Login and Logout ( when context is changed )

I have a react native app and whenever I try to login or logout the app crashes .. I am not getting any error logs in React Native Debugger.
so the App Crashes and then when I reopen the app the changes have already taken effect ( i.e :- If I was trying to login I would be logged in when I reopen the app)
I have 2 files for Navigation
CofficNavigator.tsx
// This file has all the routing
// here BottomNavigator is a tab Navigator and AuthNavigator is a stack navigator
// Before the app crashing all the correct state is set but it just crashes
// ----------- Final Stack Navigator ----------------
const FinalStackNavigator = createStackNavigator();
export const FinalNavigator = (props: any) => {
const authContext = useContext(AuthContext);
const [signedIn, setSignedIn] = useState<boolean | null>(
authContext.isLoggedIn
);
useEffect(() => {
if (authContext.isLoggedIn !== signedIn && !authContext.isLoading) {
setSignedIn(authContext.isLoggedIn);
}
}, [authContext]);
return (
<FinalStackNavigator.Navigator>
{signedIn ? (
<>
<FinalStackNavigator.Screen
name="BottomNavigator"
component={BottomNavigator}
options={{ headerShown: false }}
/>
</>
) : (
<>
<FinalStackNavigator.Screen
name="AuthNavigator"
component={AuthNavigator}
/>
</>
)}
</FinalStackNavigator.Navigator>
);
};
AppNavigator.tsx
export const AppNavigator = (props: any) => {
return (
<NavigationContainer>
<FinalNavigator />
</NavigationContainer>
);
};
-------- Login Logic flow -------------
on success of login API I call this line
await authContext.changeCofficToken(result.data.login.token);
AuthContext.ts
const changeCofficToken = async (token: string) => {
await setItem("cofficToken", token);
setIsLoggedIn(true);
setCofficToken(token);
};
helper.ts
export const setItem = async (key: string, value: any) => {
await AsyncStorage.setItem(key, value);
};
App.tsx
return (
<AuthContextProvider>
<FilterContextProvider>
<SearchTermContextProvider>
<ShowVerticalListContextProvider>
<CouponContextProvider>
<ApolloProvider client={client}>
<AppNavigator />
</ApolloProvider>
</CouponContextProvider>
</ShowVerticalListContextProvider>
</SearchTermContextProvider>
</FilterContextProvider>
</AuthContextProvider>
);
------ End of Login Logic code flow -------
Error logs from my IOS Simulator
com.apple.CoreSimulator.SimDevice.957FA264-501C-44C3-80F3-9E8D1F600A1E[15500] (UIKitApplication:host.exp.Exponent[e036][rb-legacy][15601]): Service exited due to SIGABRT
assertion failed: 19F101 17F61: libxpc.dylib + 83746 [ED46009E-B942-37CC-95D4-82CF3FE90BD8]: 0x7d
Please Note :- I am using Expo if it matters
Video Link :- https://fisico-dhaval.s3.ap-south-1.amazonaws.com/Screen+Recording+2020-08-20+at+5.38.06+PM.mov
If you need any other code snippets then please do lemme know
Any help will be appreciated
Can you share the code where you setSignin. In case if you are saving and clearing token, make sure those libraries are supported and linked properly.
Service exited due to SIGABRT is a common issue in Native iOS development, it can be cause due to various events. While working on react-native, I have never experienced this error. But I'm adding some of my observation, may be that can help you,
This can be cause due to some buggy component, which are not compatible with Expo version. So, you need to add many console.log or may be comment some things and check is there any functionality or a component causing this error. A buggy component can be a culprit.
If you have pod installed, Make sure you check all your libraries.You likely have some issue with an installed external library. and make sure you run pod install and delete node_modules folder and then run npm install again (close the packager too)
You can also use sentry or any other crash reporting library to detect crashes, It will give you the exact line number.
Sometimes the crash reporting libraries won't work, the reason can be that the crash occurs before the js bundle is loaded and because of that, the library is not yet initialised and it can't detect the crash. If so you can install a native crash reporting library, You can use fabric for that, or even bugsnag.
These are few scenarios, I've observed via which you can debug or detect what's the real cause of this error.