The problem is that the built app doesn't connect to spotify. But it works in dev mode.
Here is the context:
we have react native expo app
trying to connect to spotify via useAuthRequest from expo-auth-session (uses Linking under the hood).
sign-in-container.js:
import SignIn from './sign-in-component.js';
import { connect } from 'react-redux';
import {compose} from "ramda";
import React, {useEffect} from 'react';
import {isLogged} from "../../features/user-authentication/user-authentication-reducer";
import {signIn} from "../../features/user-authentication/user-authentication-saga";
import withGradient from "../../HOCs/with-gradient/with-gradient";
import {makeRedirectUri, useAuthRequest} from "expo-auth-session";
const mapStateToProps = state => ({
isLogged: isLogged(state),
});
const redirectUrl = makeRedirectUri();
const clientId = '***';
const discovery = {
authorizationEndpoint: 'https://accounts.spotify.com/authorize',
tokenEndpoint: 'https://accounts.spotify.com/api/token',
};
export default compose(
connect(mapStateToProps, {signIn}),
withGradient,
)(({ isLogged, signIn, navigation }) => {
const [request, response, promptAsync] = useAuthRequest(
{
clientId: clientId,
scopes: ['user-read-email', 'playlist-modify-public'],
usePKCE: false,
redirectUri: redirectUrl,
},
discovery
);
useEffect(() => {
if (response?.type === 'success') {
const { code } = response.params;
signIn(code);
}
}, [response]);
const handlePressSpotifyButton = () => {
promptAsync().then(() => {
navigation.navigate('Onboarding')
});
};
return <SignIn isLogged={isLogged} onPressSpotifyButton={handlePressSpotifyButton}/>;
});
And getting warning when start the project in dev mode (yarn start):
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:
https://docs.expo.io/versions/latest/workflow/linking/
Without scheme it doesn't start via expo publish/expo build
Adding 'exp' as scheme for app.json config
"scheme": "exp"
After publishing get an error incorrect redirect link
redirection link in app:
started locally: exp://192.168.0.159:19000 (works)
published: exp://exp.host/#expo-user-name/my-app (incorrect)
How does the redirection link should look like to work not only in dev mode? Is adding 'exp' as scheme is correct?
Related
in my app.js I have the following:
import React from 'react';
import { ApolloClient, InMemoryCache, createHttpLink, ApolloProvider } from '#apollo/client';
import * as Network from 'expo-network';
Per Apollo documentation I am assigning a uri to httpLink. Currently the uri is static but I would like this uri to be dynamic and update before the app renders.
const httpLink = createHttpLink({
uri: `http://192.168.1.165:5000/graphql`,
});
// get headers
const authLink = setContext( async (_, { headers }) => {
// return headers
...
});
// create apollo client
const client = new ApolloClient({
link: authLink.concat(httpLink),
cache: new InMemoryCache()
});
Finally rendering the app and passing client to Apollo:
export default () => {
return (
<ApolloProvider client={client}>
<SomeModule>
</SomeModule>
</ApolloProvider>
);
};
I'm attempting to use Expo to get the client IP address. The expo docs give a limited example of getting the ip address which I've interpreted to mean something like:
async function getLocalIPAddress() {
const ipAddress = await Network.getIpAddressAsync();
// do something
}
How should I invoke the function to get the IP address before export default is invoked?
After upgrading from firebase v8 to v9 I have this problem, writing to firestore works fine in web browser but not on IOS / Android (no writing is done), after few minutes I have this warning:
#firebase/firestore:, Firestore (9.1.3): Connection, WebChannel transport errored:, me ...
summary of the code
import { initializeApp } from 'firebase/app'
import { getFirestore } from "firebase/firestore"
import { doc, setDoc } from "firebase/firestore"
const app = initializeApp(config)
const db = getFirestore(app);
const MyComponent = () => {
...
useEffect(() => {
(async function zda() {
await setDoc(doc(db, "users", "mario"), {
employment: "plumber",
outfitColor: "red",
specialAttack: "fireball"
})
})()
}, [])
By the way, I solved my problem with this line
const db = initializeFirestore(app, {useFetchStreams: false})
I am using React Native v0.65.1 (React Native CLI) and Flipper desktop app v0.114.1 on Windows 10 OS. In my React Native app I am using Redux toolkit. As much as I could explore RN above v0.62 should support Flipper out of the box, and Redux toolkit does not request additional middleware configuration for flipper.
I tried to install npm package of the flipper-plugin-redux-debugger and nothing, Redux Debugger in Flipper is still unavailable.
Where is my problem?
This is how you add Flipper if your are using Redux Toolkit:
const createDebugger = require('redux-flipper').default; // <-- ADD THIS
const configureCustomStore = () => {
const rootReducer = combineReducers({
// ... YOUR REDUCERS
});
const store = configureStore({
reducer: rootReducer,
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware()
.concat(createDebugger()), // <-- ADD THIS
});
return {store};
};
export const {store} = configureCustomStore();
Note, if you are using Custom Development Client from Expo, you will need to rebuild the app.
#Tymoxx answer is correct, i just want to highlight that do not enable debugger in production app. Modify to this will help
const createDebugger = require('redux-flipper').default; // <-- ADD THIS
const configureCustomStore = () => {
const rootReducer = combineReducers({});
const store = configureStore({
reducer: rootReducer,
middleware: (getDefaultMiddleware) => __DEV__ ?
getDefaultMiddleware({ serializableCheck: false}).concat(createDebugger()) :
getDefaultMiddleware({
serializableCheck: false}),
});
return {store};
};
export const {store} = configureCustomStore();
I had started a project a little while ago and have been busy lately so I have not been able to work on it. I am out of practice with web development because I had recently joined the military. Right now the project consists of a create-react-app app with auth0 integrated. What I am trying to do is get the plaid link integrated into the page it takes you after logging in using auth0. I am requesting help on what code from the plaid docs I use in order for this to work. Their documentation is a little confusing to me, maybe because I'm so out of practice. Any help would be much much appreciated.
https://github.com/CollinChiz/SeeMyCash
Have you taken a look at the Quickstart at https://github.com/plaid/quickstart/? It contains a full React implementation that does this. Here's the relevant excerpt:
// APP COMPONENT
// Upon rendering of App component, make a request to create and
// obtain a link token to be used in the Link component
import React, { useEffect, useState } from 'react';
import { usePlaidLink } from 'react-plaid-link';
const App = () => {
const [linkToken, setLinkToken] = useState(null);
const generateToken = async () => {
const response = await fetch('/api/create_link_token', {
method: 'POST',
});
const data = await response.json();
setLinkToken(data.link_token);
};
useEffect(() => {
generateToken();
}, []);
return linkToken != null ? <Link linkToken={linkToken} /> : <></>;
};
// LINK COMPONENT
// Use Plaid Link and pass link token and onSuccess function
// in configuration to initialize Plaid Link
interface LinkProps {
linkToken: string | null;
}
const Link: React.FC<LinkProps> = (props: LinkProps) => {
const onSuccess = React.useCallback((public_token, metadata) => {
// send public_token to server
const response = fetch('/api/set_access_token', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ public_token }),
});
// Handle response ...
}, []);
const config: Parameters<typeof usePlaidLink>[0] = {
token: props.linkToken!,
onSuccess,
};
const { open, ready } = usePlaidLink(config);
return (
<button onClick={() => open()} disabled={!ready}>
Link account
</button>
);
};
export default App;
I'm new to shopify-App developmet and came across Polaris, react library provided by Shopify for consistent user-interface development. My ideas is to build a Node.js Express App to authenticate and install the app and to process data and have a react app for the User Interface for the shop-admin.
I searched through the web, but couldn't find a standard or recommended way of connecting react app to the shopify app.
What I could figure out was to redirect to the React app from the Node app when a shop admin select app from Apps section and is authenticated successfully as follow.
app.get('/shopify/callback', (req, res) => {
const { shop, hmac, code, state } = req.query;
const stateCookie = cookie.parse(req.headers.cookie).state;
if (state !== stateCookie) {
return res.status(403).send('Request origin cannot be verified');
}
if (shop && hmac && code) {
const map = Object.assign({}, req.query);
delete map['signature'];
delete map['hmac'];
const message = querystring.stringify(map);
const generatedHash = crypto
.createHmac('sha256', apiSecret)
.update(message)
.digest('hex');
if (generatedHash !== hmac) {
return res.status(400).send('HMAC validation failed');
}
const accessTokenRequestUrl = 'https://' + shop + '/admin/oauth/access_token';
const accessTokenPayload = {
client_id: apiKey,
client_secret: apiSecret,
code,
};
request.post(accessTokenRequestUrl, { json: accessTokenPayload })
.then((accessTokenResponse) => {
const accessToken = accessTokenResponse.access_token;
const shopRequestUrl = 'https://' + shop + '/admin/shop.json';
const shopRequestHeaders = {
'X-Shopify-Access-Token': accessToken,
};
res.redirect([URL to the react app built with Polaris]);
})
.catch((error) => {
res.status(error.statusCode).send(error.error.error_description);
});
} else {
res.status(400).send('Required parameters missing');
}
});
I got this working, but I'm not sure whether this is the recommended way to do it.
They are 3 different things: Node.JS, React, and Polaris and you can choose any of them. Polaris is a library and if you want to use it just run yarn add #shopify-polaris and read its documentation. That's all.
With or without Polaris, you could still create a Shopify app, with various stacks.