I'm trying to oAuth through the Spotify api for my React-Native app, but continue to get a ExpoAppAuth.get Auth: Network Error message. I'm not understanding what the issue could be, or where in particular to look since the trace is so vague. My clientID and such are correct as well.
`import * as AppAuth from 'expo-app-auth;
let userData = {
clientId: 'CLIENT_ID',
additionalParameters: {response_type: 'code', show_dialog: true},
redirectUrl: 'http://www.google.com',
issuer: "https://accouns.spotify.com/authorize"
};
AppAuth.authAsync(userData)
.then( data => console.log(data))
.catch( (error, state) => console.log(`Error: ${error} State: ${state}`));
This is related to the issue at https://github.com/expo/expo/pull/5311 - there is an error in a ternary operator in expo-app-auth which will get rolled into an upcoming release. In the meantime, you must specify a dummy value for registrationEndpoint in your service configuration object.
Related
I am relatively new to Next.js, and I though I have been encountering some bugs and issues here and there, I have been able to overcome most of them. The latest one I have not been able to figure out, so let's see if somebody else knows what's going on.
I am creating an e-commerce platform on Next.js, Redux and Axios. For the moment I am using fake data to populate the products. When creating a checkout session, the data of the items in the cart is pushed (I can console.log() and I see the items in the terminal. However, the mapping of the checkout session to Stripe is not working. The error I get is an AxiosError: Request failed with status code 500
Error message screenshot
I am trying to add the item data dynamically to the checkout session as follows:
const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);
export default async (req, res) => {
const { items, email } = req.body;
const transformedItems = items.map((item) => ({
description: item.description,
// if quantities are bundled, this needs to change.
quantity: 1,
price_data: {
currency: 'usd',
unit_amount: item.price * 100,
product_data: {
name: item.title,
images: [item.image],
},
},
}));
const session = await stripe.checkout.sessions.create({
line_items: transformedItems,
mode: 'payment',
success_url: `${process.env.HOST}/success`,
cancel_url: `${process.env.HOST}/checkout`,
metadata: {
email,
images: JSON.stringify(items.map((item) => item.image)),
},
});
res.status(200).json({ id: session.id });
};
I have also tried copying the exact code from the Stripe documentation and implementing the changes, but this hasn't changed anything either.
I know, Stripe has made some changes to their API, and that for instance you can't specify anymore with statements like
payment_method_types: ["card"],
anymore. So I took it out.
I have not included any code from the checkout piece, as this seems to be working (as stated, it console.logs() just fine. I can provide this as well though, if someone thinks the issue might be there.
Thanks in advance.
Nela.
Thanks to Code-Apprentice and maiorano84 whose hints in the comments:
A status code 500 means there is an error on the backend. If the server is under your control, then you need to look at the server logs to see what the problem is. The server logs will have a stack trace that shows you where the problem occurs. If you need help understanding the stacktrace, you will need to include it in your question. – Code-Apprentice 22 hours ago
Is this a server-side or client-side AJAX request? If it's the latter, check your network tab to see the full output of your failed request (marked in red in Chrome Devtools). You should be able to get more information about the failed request there. If it's failing on the Stripe side, the Response Headers and Body should have more information there to help you debug. If it's failing on your own success and checkout callbacks, your server logs might have additional information that can help you. – maiorano84 22 hours ago
led me to the answer. I checked my console, and the error that was given was from Stripe. It read as follows:
StripeInvalidRequestError: You cannot use line_items.amount, line_items.currency, line_items.name, line_items.description, or line_items.images in this API version. Please use line_items.price or line_items.price_data.
So I moved the item.description I had outside of the product_data object, into it, and it worked.
The code looks now like this:
const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);
export default async (req, res) => {
const { items, email } = req.body;
const transformedItems = items.map((item) => ({
// if quantities are bundled, this needs to change.
quantity: 1,
price_data: {
currency: 'usd',
unit_amount: item.price * 100,
product_data: {
name: item.title,
description: item.description,
images: [item.image],
},
},
}));
const session = await stripe.checkout.sessions.create({
line_items: transformedItems,
mode: 'payment',
success_url: `${process.env.HOST}/success`,
cancel_url: `${process.env.HOST}/checkout`,
metadata: {
email,
images: JSON.stringify(items.map((item) => item.image)),
},
});
res.status(200).json({ id: session.id });
};
So I'm fairly new with using Keycloak and I'm using this tutorial to install it with my React & TS app.
https://blog.devgenius.io/security-in-react-and-webapi-in-asp-net-core-c-with-authentification-and-authorization-by-keycloak-89ba14be7e5a
That author says we should set the Access Type to confidential.
I've done the settings he says there (literally the same) and I get
{"error":"unauthorized_client","error_description":"Client secret not provided in request"}
my keycloak.json (which is in the public/ folder)
{
"realm": "best-realm",
"auth-server-url": "http://localhost:28080/auth/",
"ssl-required": "external",
"resource": "best-react",
"verify-token-audience": true,
"credentials": {
"secret": "secret"
},
"use-resource-role-mappings": true,
"confidential-port": 0
}
KeycloakService.tsx
import Keycloak from "keycloak-js";
const keycloakInstance = new Keycloak();
/**
* Initializes Keycloak instance and calls the provided callback function if successfully authenticated.
*
* #param onAuthenticatedCallback
*/
const Login = (onAuthenticatedCallback: Function) => {
keycloakInstance
.init({ onLoad: "login-required" })
.then(function (authenticated) {
authenticated ? onAuthenticatedCallback() : alert("non authenticated");
})
.catch((e) => {
console.dir(e);
console.log(`keycloak init exception: ${e}`);
});
};
const KeyCloakService = {
CallLogin: Login,
};
export default KeyCloakService;
Why am I getting this error? I've read some posts that access type confidential doesn't work anymore with a JS adapter. But those posts were older than the posting date of that tutorial (it is written in may 2022). So I don't know what to believe.
Can anybody help me understand this error and teach me how to fix it?
Thanks.
In keycloak.js removed "credential" access type option.
Official comment about this since Keycloak 8.0.0
https://www.keycloak.org/docs/latest/release_notes/#credentials-support-removed-from-the-javascript-adapter
You should be use public option in front-end side.
The public option with PCKE(Proof Key for Code Exchange) is protect to steal token that is intended for another app.
Understanding benefits of PKCE vs. Authorization Code Grant
This web site shows how to use PCKE from Keycloak
https://www.appsdeveloperblog.com/pkce-verification-in-authorization-code-grant/
I am trying to send some data to MongoDB Atlas from a React frontend. I tested the backend (an Express server) with Postman. The routes and endpoints are working as expected, and I can create todos and see them in MongoDB-Atlas.
// createTodo.js
onSubmit(e) {
e.preventDefault()
const todo = {
todoTitle: this.state.todoTitle,
todoBody: this.state.todoBody,
}
console.log(todo)
axios.post('http://localhost:5000/api/todos', todo).then((res) => console.log(res.data))
this.setState({
todoTitle: '',
todoBody: '',
})
}
the (res.data) that I am console.logging gives me an object with a MongoError 11000 code.
Object { driver: true, name: "MongoError", index: 0, code: 11000, keyPattern: {…}, keyValue: {…} }
CreateTodo.js:40
Any one have experience with this type of error? Are there any online resources or guides to help resolve this one? Thank you.
I got this error one time when i defined a collection with a particular name and later on changed the name, hence i believe that mongoDB expected to receive a data attributed to that particular name but didn't and got that error. However, i managed to fix it after dropping the collection and run again.
I`ve tried to register my app as Web application, generate the user id and implement it in my code but get an error when I press my button for log in with google:
[Unhandled promise rejection: Error: Please provide the appropriate client ID.
enter image description here
If you're using expo, you have to configure the google sign-in like this. This is my configuration. You have to create androidClientId and iosClientId from your account and use it here.
Disclaimer: This is a standalone function only for signingin/signingup a Google user and fetching details. To configure it with firebase you have to add other functions too.
Also, make sure that you're importing this package. I faced a similar problem when I used another package.
import * as Google from 'expo-google-app-auth'
Additionally, are you using the latest version of expo SDK?
async signInWithGoogleAsync() {
try {
const result = await Google.logInAsync({
androidClientId:
'your-id',
iosClientId:
'your-id',
scopes: ['profile', 'email'],
permissions: ['public_profile', 'email', 'gender', 'location']
})
if (result.type === 'success') {
/*put your logic here, I set some states and navigate to home screen
after successful signin.*/
const googleUser = result.user
this.setState({
email: googleUser.email,
name: googleUser.name,
})
this.navigateToLoadingScreen()
return result.accessToken
} else {
return { cancelled: true }
}
} catch (e) {
return { error: true }
}
}
I have trouble understanding on how to fetch my data from sanity. I have read the documentation but still i'm confused.
I tried just logging the data to the console but it gives me an error like, "No 'Access-Control-Allow-Origin' header is present on the requested resource."
import React from "react";
import sanityClient from "#sanity/client";
const Post = () => {
const client = sanityClient({
projectId: "6sf5fafo",
dataset: "production",
useCdn: true
});
// fetching the data
client
.fetch('*[__type == "post"][0]{title, "name": author->name}', {})
.then(res => {
console.log("Post info: ", res); // Here is when i tried to log the data but gets an error message.
})
.catch(err => {
console.log(err);
});
return (
<div>
<h1>Hello</h1>
</div>
);
};
export default Post;
Can someone do some edits to my code to properly fetch the data from sanity it would be very much appreciated.
You're getting this error because Sanity denies access from unknown browser origins. By default (when generating a new project), the only origin allowed is http://localhost:3333. You may grant access to any additional origins.
Say you're running your Content Studio on https://studio.mysite.com and want to grant access to that URL. There are two ways of doing this:
Open your terminal, switch directory to where you keep your Studio source code, then type:
sanity cors add https://studio.mysite.com
Go to your project settings and add the origin via the web UI. Since you projectId is 6sf5fafo, these settings can be found at https://manage.sanity.io/projects/6sf5fafo/settings/api
For more on Sanity and CORS, please refer to the documentation at https://www.sanity.io/docs/front-ends/cors