We Keep Coding

React Native useContext Hooks Issue

I would like to encapsulate the logic for a function to send push notifications so that it can be called from anywhere in the app. The push notifications API requires a jwtToken to be passed in the header. I want to call useContext on the AuthContextProvider to extract the token but the rules of hooks don't allow my function to call useContext since it isn't a React function component.
import React, { useContext } from "react";
import { AuthContext } from "#context/AuthContextProvider";
export const sendPushNotification = async function (notificationObject) {
const { authData } = useContext(AuthContext); //**<-- Fails with hooks error**
const authToken = authData.signInUserSession.idToken.jwtToken;
...
Here is the code that calls the function:
function AddToDoScreen() {
...
function handleSubmitAsync() {
...
let pushNotificationObject = {
profileIDs: [values.profileID],
title: "Push Notification Title",
body: "Push Notification Message",
};
sendPushNotification(pushNotificationObject);
I think this can be accomplished with a custom hook, but I'm not sure how. I tried starting the function name with use, but that didn't help.
Any pointers on how to implement this so I don't have to get the IdToken in each function that wants to call the sendPushNotification function?
BTW, I know you can't call Hooks inside nested functions. I tried moving the code up into the AddToDoScreen function but got the same error.

You've basically two options here:
Create a custom hook that encapsulates all the logic and returns a callback function a component can invoke.
import React, { useCallback, useContext } from "react";
import { AuthContext } from "#context/AuthContextProvider";
export const usePushNotification = () => {
const { authData } = useContext(AuthContext);
const authToken = authData.signInUserSession.idToken.jwtToken;
const sendPushNotification = useCallback(async (notificationObject) => {
... logic to use token and notification object and send push ...
}, [authToken]);
return {
sendPushNotification
};
};
function AddToDoScreen() {
const { sendPushNotification } = usePushNotification();
...
function handleSubmitAsync() {
...
const notification = {
profileIDs: [values.profileID],
title: "Push Notification Title",
body: "Push Notification Message",
};
sendPushNotification(notification);
}
...
}
Access the authToken value from the context in the React component and pass it to the callback function.
export const sendPushNotification = async ({
authToken,
notification,
}) => {
... logic to use token and notification object and send push ...
};
function AddToDoScreen() {
const { authData } = useContext(AuthContext);
const authToken = authData.signInUserSession.idToken.jwtToken;
...
function handleSubmitAsync() {
...
const notification = {
profileIDs: [values.profileID],
title: "Push Notification Title",
body: "Push Notification Message",
};
sendPushNotification({
authToken,
notification,
});
}
...
}

React Function to Component and Setting State with Function Return

here's the jist of where I'm stuck (or just read the title for my question).
I have a firebase.js file where I have functions to authenticate. signinGithub, signinGoogle, signinEmail and so forth. The Firebase Auth business logic is in these functions.
I am showing errors with console.log or alert from these functions. The functions are imported into a Component and I don't know how to capture the functions result into the component by somehow setting state from this out-of-component function file.
Here's a basic example:
firebase.js
...
const signInWithGitHub = async () => {
try {
const res = await signInWithPopup(auth, githubProvider)
const user = res.user
} catch (err) {
alert(err) // ** I want to pass "err" from here to Login
// ** component by updating Logins state for a message
}
}
export {signinWithGitHub}
...
Login.jsx
import React, { useEffect, useState } from "react"
import { useAuthState } from "react-firebase-hooks/auth"
import {
auth,
signInWithGitHub
} from "../lib/firebase"
function Login() {
const [user, loading, error] = useAuthState(auth)
render(
{* Below is the method call from the imported custom firebase function *}
<button onClick={signInWithGitHub}>
Login with GitHub
</button>
)
}
...
I was thinking something like this but I can't fully resolve it in my mind:
Set state in Login.js const [message, setMessage] = useState('')
When the imported signinWithGitHub has an error message --
I'm stuck figuring out how to apply to function message to the state, any ideas?

You can create a custom function inside your Login. jsx file to call the original signInWithGitHub method with a try catch block. And more importantly, you should not use render inside a functional component. Use return to render the JSX in DOM.
firebase.js
export const signInWithGitHub = async () => {
try {
const res = await signInWithPopup(auth, githubProvider);
const user = res.user;
} catch (err) {
throw new Error(err?.message || "Unable to sign in with GitHub");
}
};
Login.jsx
import React, { useEffect, useState } from "react";
import { useAuthState } from "react-firebase-hooks/auth";
import { auth, signInWithGitHub } from "../lib/firebase";
function Login() {
const [user, loading, error] = useAuthState(auth);
const [errorMessage, setErrorMessage] = useState("");
const onLogin = async () => {
try {
await signInWithGitHub();
} catch (err) {
setErrorMessage(err);
}
};
return (
<>
<button onClick={onLogin}>Login with GitHub</button>
{!!errorMessage && <h5>{errorMessage}</h5>}
</>
);
}

axois react-keycloak/web token in inteceptor

I'm trying to use a request inteceptor with react-keycloak/web - however i get an array of errors when doing so.
import axios from 'axios';
import { useKeycloak } from '#react-keycloak/web';
const { keycloak } = useKeycloak();
const instance = axios.create({
baseURL: 'https://example.com/api/v1/',
timeout: 30000,
});
instance.interceptors.request.use(
(config) => {
config.headers.Authorization = `${keycloak.token}`;
return config;
},
(error) => {
return Promise.reject(error);
}
);
but i get:
React Hook "useKeycloak" cannot be called at the top level. React Hooks must be called in a React function component or a custom React Hook function react-hooks/rules-of-hooks
Now i have of course tried to create a function with for example GetToken():
function GetToken() {
const { keycloak } = useKeycloak();
return keycloak.token
}
but doing so leaves me with:
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks
You might have more than one copy of React in the same app
What am i doing wrong here?

You can't use react hooks out of react tree.
You can export axoios instance and import it elsewhere inside react (eg: App.js) and set interceptors there.
for example:
import axiosIns from 'api';
import { useKeycloak } from '#react-keycloak/web';
import { useEffect } from "react";
import WholeApp from "WholeApp";
const App = () => {
const { keycloak } = useKeycloak();
useEffect(() => {
axiosIns.interceptors.request.use(
(config) => {
config.headers.Authorization = `${keycloak.token}`;
return config;
},
(error) => {
return Promise.reject(error);
}
);
}, []);
return <WholeApp />;
}

How to handle token expiration in reactjs using firebase and passing idToken in axios interceptor?

I am trying to integrate firebase login in my react project while passing the idtoken into the Axios interceptor for API consumptions.
But I have noticed that my idtoken gets expired and that same old token gets passed into my API.
How can I refresh the token and pass the fresh token into my Axios interceptor?
Following is my code:
import React, { Component } from "react";
import Navigation from "./Navigation";
import firebase from "./firebaseApp";
import axios from "axios";
import "./index.css";
class App extends Component {
state = {
authenticated: undefined,
};
componentDidMount() {
firebase.auth().onAuthStateChanged((authenticated) => {
if (authenticated) {
let idTokenfinal;
firebase
.auth()
.currentUser.getIdToken()
.then((idToken) => {
idTokenfinal = idToken;
this.setState({
authenticated: true,
});
})
.catch((e) => {
alert(e);
});
firebase.auth().onIdTokenChanged(function (user) {
if (user) {
// User is signed in or token was refreshed.
user.getIdToken().then((idToken) => {
idTokenfinal = idToken;
});
}
});
axios.interceptors.request.use(
(config) => {
if (config.data && config.data.authToken) {
config.data.authToken = idTokenfinal;
}
return Promise.resolve(config);
},
function (error) {
// Do something with request error
return Promise.reject(error);
}
);
} else {
this.setState({
authenticated: false,
});
}
});
}
render() {
return this.state.authenticated !== undefined &&
this.state.authenticated !== null ? (
<Navigation authenticated={this.state.authenticated} />
) : (
<div className="loader"></div>
);
}
}
export default App;

Similar to onAuthStateChanged, there is onIdTokenChanged that gives you a new ID token whenever it's refresh. That refresh happens automatically every hour. If you have a listener here, there's no need to call getIdToken every time - just use the last value provided to the ID token listener.
If you don't want to use the listener for some reason, you can call getIdToken(true) to refresh the token each time, but that will add overhead to each call. It's better to use the value provided by the listener.

Line 105:14: 'accountSelector' is not defined no-undef

Could someone please explain what is going wrong in simple terms so I know how to fix this and can deal with it next time I encounter it.
I have looked through all related questions I could find on stackoverflow and haven't been able to fix it, if I have missed one that answers this then please link it.
I have had this error in the past but usually that was just because I had a typo (e.g. a capital instead of a lowercase) or did not import something correctly however that is not the case this time as far as I can tell.
FIRST CODE app.js
SECOND CODE interactions.js
Here is my code
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Navbar from './Navbar'
import Web3 from 'web3';
import { connect } from 'react-redux'
// import Token from '../abis/Token.json'
import {
loadWeb3,
loadAccount,
loadToken,
loadExchange
} from '../store/interactions'
class App extends Component {
componentWillMount() {
this.loadBlockchainData(this.props.dispatch)
}
async loadBlockchainData(dispatch) {
const web3 = loadWeb3(dispatch)
const network = await web3.eth.net.getNetworkType()
const networkId = await web3.eth.net.getId()
const accounts = await loadAccount(web3, dispatch) // <<--
const token = loadToken(web3, networkId, dispatch)
loadExchange(web3, networkId, dispatch)
}
// ......................
function mapStateToProps(state) {
return {
account: accountSelector(state)
}
}
export default connect(mapStateToProps)(App);
import Web3 from 'web3'
import {
web3Loaded,
web3AccountLoaded,
tokenLoaded,
exchangeLoaded
} from './actions'
import Token from '../abis/Token.json'
import Exchange from '../abis/Exchange.json'
export const loadWeb3 = (dispatch) => {
const web3 = new Web3(Web3.givenProvider || 'http://localhost:7545')
dispatch(web3Loaded(web3))
return web3
}
export const loadAccount = async (web3, dispatch) => {
const accounts = await web3.eth.getAccounts()
const account = accounts[0]
dispatch(web3AccountLoaded(account))
return account
}
export const loadToken = async (web3, networkId, dispatch) => {
try {
const token = new web3.eth.Contract(Token.abi, Token.networks[networkId].address) // new 이거 의존성(버전) 문제 이거 조심!!!!!
dispatch(tokenLoaded(token))
return token
} catch (error) {
window.alert('Contract not deployed to the current network. Please select another network with Metamask.')
return null
}
}
export const loadExchange = async (web3, networkId, dispatch) => {
try {
const exchange = new web3.eth.Contract(Exchange.abi, Exchange.networks[networkId].address)
dispatch(exchangeLoaded(exchange))
return exchange
} catch (error) {
window.alert('Contract not deployed to the current network. Please select another network with Metamask.')
return null
}
}
i don'k now why this happening to me
but please let me know this problem if you know this issue

The problem seems to be that you do not define or import the accountSelector function anywhere.
You usually define Redux selector functions in your reducer definition files: they take the current Redux store state as argument (and optionally the connected component props) and return the value to be used in your MapStateToProps object property.
Ex.
export const accountSelector = (state) => state.account
You can read more about selectors on the dedicated Redux resources page

replace this
function mapStateToProps(state) {
return {
account: accountSelector(state)
}
}
with this
function mapStateToProps(state) {
return {
account: state.accountSelector
}
}
you are passing complete state in variable instead of accessing.
for your reference, how to access please go through official documentation for your better understanding Redux