I have a React Native app which connects to an OAuth2 backend. I am using Axios to connect to the API, and I have a request and response interceptor which can handle when an access token runs out, it will fetch a fresh access token using the refresh token, whilst queuing any other asynchronous requests until we have our new toke.
All of that works great, but now I have protected image resources to serve, and I'm unsure how to deal with it.
Using the React Native Image component, we can pass in headers easily enough:
<Image source={{
headers: {Authorization: 'Bearer ' + authToken },
uri: uri
}}></Image>
So yes, I can display my protected images without issue, but I need to find a way to achieve the same token refreshing functionality with the images as I do with the Axios client.
Is it possible using the React Native Image component, like a 401 callback function, or is there a library that possibly I can use for this?
Thanks in advance for any help or suggestions. 😀
Use onError to trigger a token refresh.
<Image
headers: {Authorization: 'Bearer ' + authToken },
uri: uri
onError={(error) => { /*TODO*/ }}
/>
Related
I'm trying to pass login details to a WebView, basically, my use case is, I have a login page built with React Native, after a successful login I wanted to redirect the user to a WebView login with the login details so the WebView doesn't render the login page in itself. So, to achieve this I attach the ref to webView like so
<WebView ref={webViewRef} ... />
With the login page built with ReactNative, the user will enter their credentials, once the login is successful I'll get the user details from the backend as a response to the LOGIN Post API Call, so I passed the response to the postMessage function
const response = await LOGIN({...credentials});
webviewRef.current.postMessage(response.data);
And to the React Web app, I used the below code to add the listener
window.addEventListener("message", (message) => {
alert(JSON.stringify(message.data));
});
But, I'm not getting the data with message.data.
Any workaround would highly be appreciated
You have to use injectJavaScript method on the webviewRef to send data from the app to the web(i.e., to react side). The post message will be used vice-versa i.e., to send data from react side to the app side. The solution below would solve your issue.
First on react side, set the custom function on the window object.
window.onUserLogin = function(userDetails) {
alert(`userDetails are ${JSON.stringify(userDetails)}`)
}
Now on the react-native side, you have the webViewRef. Using that please make the below call.
const USER_DETAILS = {
userName: "Haider"
};
webViewRef.current.injectJavaScript(`window.onUserLogin(${JSON.stringfy(USER_DETAILS)});true;`)
I'm pretty new in React-Native programming, but here is the context.
We are using React Query and Axios libraries in our project. As AuthManager we are using Keycloak and for the library managing auth status we have React Native Keycloak. We encounter a tedious problem with our server responding randomly 401 at our requests after a certain amount of time, bringing also to the app crash sometimes.
We reproduced the error making the Bearer Token of Keycloak expire after only 1 minute. This caused almost immediatly the 401 error and we wondered why this is happening.
Let's say we have a screen with some "Activities" and this screen is the first thing the user will see. For handling requests, in our code we use some custom hooks that reference useQuery, for example:
export function useActivities(): UseQueryResult<ActivityList> {
const { headers } = useHeaders();
return useQuery(
['activities', today.start],
() => getActivitiesList(headers), // Note 1
{
enabled: !!today.start,
}
);
}
The important point of it is that we useHeaders to get our updated headers with the Keycloak token and our realm settings. useHeaders is almost everywhere in our app.
export function useHeaders(): UseHeaders {
const { keycloak } = useKeycloak();
const KEYCLOAK_REALM = remoteConfig().getString('KEYCLOAK_REALM');
const headers = {
Authorization: `Bearer ${keycloak?.token}`,
Realm: KEYCLOAK_REALM,
};
return { headers };
}
Now, the getActivitiesList is simple as five:
async function getActivitiesList(headers: UseHeaders['headers']): Promise<ActivityList> {
const url = `${BASE_URL}${VERSION}/activities/grouped?end=${end}&start=${start}`;
// Note 2
return axios
.get(url, { headers })
.then((res) => res.data)
.catch((e) => console.error('Error fetching grouped activities:', e));
}
The problem with all of that is that whenever Keycloak will trigger the refresh token, the token inside keycloak object is changed, the headers inside useActivities are changed BUT if I print the headers inside my getActivitiesList (// Note 2), or even inside the query function (// Note 1), headers will not be updated. Sometimes it just causes to make two requests (one that fails and show error, the other one actually working), some other times the app crashes without any explain. This makes me wonder why the query function will not update its headers and passed the "old" headers inside getActivitiesList.
For now we are mitigating this problem in two different points.
After keycloak init, we pass immediatly to axios a global header with axios.defaults.headers.common.Realm = KEYCLOAK_REALM;
After receiving a valid token from Keycloak, we overwrite the Authorization header with a new one: axios.defaults.headers.common.Authorization = 'Bearer ${keycloak?.token}';
This is not a perfect solution and we are here to search some info about this problem.
Someone get something similar? How to manage the token refresh in useQuery function?
I am working on a react native application and I have some problems with OpenID connect. I would like to use some "Login with Google" functionality.
In normal (not native) react app I use the react-google-login library like this:
import { GoogleLogin} from 'react-google-login';
import axios from 'axios';
const CLIENT_ID = 'xxxxx.apps.googleusercontent.com';
const Login = () => {
const loginHandler = (response) => {
// I can use the OpenID JWT token got as response.tokenId e.g.
axios.get("/myapi", {
headers: {
Authorization: 'Bearer ' + response.tokenId
}
}).then(res => {
...
});
}
return (
<React.Fragment>
<GoogleLogin
clientId={CLIENT_ID}
buttonText='Login'
onSuccess={loginHandler}
cookiePolicy={'single_host_origin'}
responseType='code,token'
uxMode="redirect"
/>
</React.Fragment>
)
}
export default Login;
In the login handler as you can see I can use the OpenID JWT token and I can send it to the server.
I need the same in React Native but I haven't found any simple library for that. Neither of them returns the OpenID JWT token just the Oauth2 access token.
Does anybody have any idea which library I should use and how?
Thanks
Maybe you should use this library
npm install react-native-app-auth --savereact-native link react-native-app-auth
If you use yarn as a packet manager
yarn add #react-native-app-auth
Finally I managed to accomplish this with AppAuth
I'm using Instagram API for authentication in my app. the API works fine but when a user is using two-factor authentication the redirect_uri doesn't work and user redirected to the Instagram main page instead of the correct URL (my app login URL). I don't know how should I handle this and couldn't find any good answer. please help me
Note: this scenario happens for the first time and when Instagram's login session is available in browser user logged in correctly.
Not sure if this is still helpful. But I implemented the following on React Native WebView component and resolved Instagram's clear misstep.
Note - A more robust solution would be for Instagram to actually solve the bug.
As props on WebView:
source={{ uri: this.state.uri }}
onNavigationStateChange={this._onNavigationStateChange}
The handling method:
_onNavigationStateChange(webViewState){
const url = webViewState.url || ''
if(url.includes('challenge')){
this.setState({challenged: true})
}
if(url === 'https://www.instagram.com/' && this.state.challenged){
this.setState({
uri: `${URI}&indifferent_query_param=${(new Date).getTime()}`
})
}
}
The handling method forces rerender of WebView and sends the user to the "authorize" page. Depending on your platform of implementation, you could apply something similar to the above.
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.