Develop Reference

HTTP Fetch Spotify API token request failure

so basically under guidance of the Spotify WebAPI doc I am trying to request an access token via Client Credentials method. Spotify API Doc. I want to use a regular HTTP fetch request, I can not use any 3rd party libraries. I am getting a 400 return status error response: {error: "unsupported_grant_type", error_description: "grant_type parameter is missing"}. However I believe my request should be formated correctly for its grant type. I have looked at tons of articles, MDN doc, and the Spotify doc and I can not figure out why this is not working. I will include the code which I have obviously taken the api keys out of but they are correct. Link to code.
import React, { Component, useState , useEffect } from 'react';
//Custom IMPORTS:
import '../PageCss/HeaderSection.css'
const Spotify = () => {
const [baseUrl, setBaseUrl] = useState("https://accounts.spotify.com/api/token");
const [token, setToken] = useState([]);
const [currentStatus, setStatus] = useState(false);
const client_id = '';
const client_secret = '';
const data = { grant_type: 'client_credentials' };
useEffect(() => {
fetch(baseUrl,
{
method: 'POST',
headers: {
"Content-Type": "application/x-www-form-urlencoded",
'Authorization': 'Basic ' + (client_id + ':' + client_secret).toString('base64')
},
redirect: 'follow',
body: JSON.stringify(data),
})
.then((response) => {
if (!response.ok) {
return Promise.reject(new Error("Response Error!"));
}
else {
return response.json();
}
})
.catch((err) => {
console.log(err);
})
.then((json) => {
try {
setToken(json.results);
setStatus(true);
console.log("TOKEN:" + token)
}
catch
{
return Promise.reject(new Error(`State Error!: Data: ${token} , Connection:${currentStatus}`));
}
})
.catch((err) => {
console.log(err);
})
}, [baseUrl]);
return (
<div >
</div>
)
};
export default Spotify;
My application is a react app, hosted on GitHub. It's a fully functioning site and everything else is working fine. My other API fetch calls are working fine so I know this one must have an issue in it. The only line of code giving me an error is this 400 status from the fetch request.

Hey so I actually got the inital token request to work with this code:
fetch(baseUrl,
{
method: 'POST',
body: 'grant_type=client_credentials&client_id=' + client_id + '&client_secret=' + client_secret,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})
Inspired by the OAuth doc and some more researching. It works now and I have a token from Spotify.

Using tokens to authorize in Sanctum

I want to use React with Sanctum. In Sanctum, I generated the token and return it after login, and it works correctly. However, after login, I can see my token in the console, but if I want to open the route for logged-in users, I must send this token in the header. What is the best method to do that?
public function login(Request $request)
{
$attr = $request->validate([
'email' => 'required|string|email|',
'password' => 'required|string|min:6'
]);
if (!Auth::attempt($attr)) {
return $this->error('Credentials not match', 401);
}
return response()->json([
'access_token' => auth()->user()->createToken('auth_token')->plainTextToken,
'token_type' => 'Bearer',
]);
}
And login into React.
function Login () {
const emailRef = useRef(),
passwordRef = useRef();
const handleSubmit = (event) => {
event.preventDefault();
axios.post('http://localhost:8000/api/auth/login', { email: emailRef.current.value, password: passwordRef.current.value })
.then(res => {
console.log(res);
}).catch((error) => {
console.log(error)
});
}
return(
// Here is my form
);
}
#Edit
I don't sure I good understand but it doesn't work. If I try to get address witch need to autorize I have a status 401.
I make instance
instance.php
import axios from 'axios'
let instance = axios.create({
baseURL: 'http://localhost:8000',
headers: {
common: {
'X-Requested-With': 'XMLHttpRequest',
}
},
withCredentials: true,
});
export default instance;
And I login user. In React it look like this
instance.post('/api/auth/login', {
email: emailRef.current.value,
password: passwordRef.current.value
}).then(res => {
console.log(res);
})
Generally it works. I want to add someting which need to authorize.
instance.get('/api/me')
.then(res => {
console.log(res.data.data.token);
}).catch((error) => {
console.log(error)
});
And in Api.php it look like this
Route::post('/auth/register', [AuthController::class, 'register']);
Route::post('/auth/login', [AuthController::class, 'login']);
Route::group(['middleware' => ['auth:sanctum']], function () {
Route::get('/me', function() {
echo "Hello World";
})->name('me');
Route::post('/auth/logout', [AuthController::class, 'logout']);
});

You should be able to not need to store anything in any special place by just using Axios config like this:
axios.create({
headers: {
common: {
'X-Requested-With': 'XMLHttpRequest',
},
},
withCredentials: true,
});
The withCredentials: true will store the CSRF token and any credential once you login, so you would not have to worry anymore about sending any credentials or anything like so.
This is another example.
You could also take advantage of Axios and also delete any data you have store when a request returns 401 (Unauthorized) or 419 (Session Expired).
authClient.interceptors.response.use(
(response) => response,
(error) => {
if (error.response &&
[401, 419].includes(error.response.status) &&
store.getters[`user/${IS_GUEST_GETTER}`]
) {
store.dispatch(`user/${LOGOUT_ACTION}`);
}
return Promise.reject(error);
}
);
In this example, I am using a store like vuex and I am asking first if the current user is a guest or not, and then deleting everything from the session with a simple logout (on Vue and Laravel).
You can do this with Interceptors.

How to Fix CSRF token issue using JavaScript (without jQuery)
Error I was facing.
419 PAGE EXPIRED
message : "CSRF token mismatch.", exception: "Symfony\Component\HttpKernel\Exception\HttpException"
My Route is protected with auth:sanctum, above snippet also worked with auth middleware.
Route::post('/media/upload', MediaController::class)
->middleware('auth:sanctum')
->name('media.upload');
1st add <meta name="csrf-token" content="{{ csrf_token() }}"> in app.blade.php
2nd: Get the csrf-token value using document.querySelector('meta[name="csrf-token"]').getAttribute('content')
Snippet headers settings
headers: {
"Accept": "application/json",
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
},
"Accept": "application/json" for 419 PAGE EXPIRED fixing.
'X-CSRF-TOKEN': document.querySelector('me... for CSRF token mismatch.
It worked either you are using axios, Ajax, XHR, uppy.io XHRUpload, or SPA
$.ajax({
type:'POST',
url:'/ajax',
headers: {
"Accept": "application/json",
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
},
});

Login page won't redirect to route to logged-in page

I've been struggling now with my login page to make the component render the Loggedin component.
I'm having Reactjs for the frontend and a NodeJS backend.
I'm fairly new to nodejs, express and react.
On the loginform component I do a post using fetch which passes the username and password to corresponding endpoint on the backend. No problem.
At the backend it reads the jsonfile where i store users(not using any DB for this project) to find a match and if both username and password match the response it send is true. And i've tested that this works.
LoginForm Frontend:
handleSubmit= (e) => {
e.preventDefault()
console.log(this.state)
const { username, password} = this.state;
const data = {username: username, password:password}
fetch('http://localhost:3001/Login', {
method: 'POST',
mode:'cors',
body: JSON.stringify(data),
headers: {
"Content-type": "application/json"
}
})
.then(function(res){
return res.json()}).then(function(resjson){
console.log(resjson);
if (resjson){
console.log(resjson);
return<Redirect to='/myAccount'/>
}
if(resjson==false){
console.log(resjson);
}
})
}
I've been trying to make use of react-router-dom by experimenting. But no matter how i went with it the component for the logged in users never renders evens if resjson is true, not even the route changes to "localhost:3000/myAccount".
I've also tried adding useHistory but that results in an invalid Hook when i add const history=useHistory();
Any ideas? If you need me to add anything else i'll do it, since i'm not that experience when it comes to JS i might have left something important out.
Thanks in advance!

Take a look below, i wrote explanations in comments :
fetch("http://localhost:3001/Login", {
method: "POST",
mode: "cors",
body: JSON.stringify(data),
headers: {
"Content-type": "application/json",
},
})
.then(function (res) {
return res.json();
})
.then(function (resjson) {
console.log(resjson);
if (resjson) {
console.log(resjson);
// here you're returning a React Component and it could work inside render !
// return <Redirect to="/myAccount" />;
// you could use history to redirect:
// if you're inside a class component you could use withRouter HOC instead (there is a link below)
return history.push("/myAccount");
}
if (resjson == false) {
console.log(resjson);
}
});
here is the link for the withRouter HOC use.

How to login user to spring-security app using Vue.js?

Hi it's my first post on stack overflow. I want to separate back-end from front-end and create REST API using my Spring Boot app. I use spring-security to login. It use something called JSESSION_ID but how to login and authorize users using Vue.js? I want to make form for login to my service and authorize request with JSESSION_ID.
It's my first app in Vue.js. I try to use code from tutorials and docs but it didn't solve my problem. I also have issues with CORS.
export default {
name: 'Login',
data(){
return{
username: '',
password: '',
error: false
}
},
updated(){
if (localStorage.token){
this.$router.replace(this.$route.query.redirect || '/')
}
},
methods:{
login(){
this.$http.post('http://localhost:8080/login', { username: this.username, password: this.password })
.then(request => this.loginSuccessful(request))
.catch(() => this.loginFailed())
},
loginSuccessful (req) {
if (!req.data.token) {
this.loginFailed();
return
}
this.error = false;
localStorage.token = req.data.token;
this.$router.replace(this.$route.query.redirect || '/')
},
loginFailed () {
this.error = 'Login failed!';
delete localStorage.token
}
}
}
I expect to login and authorize users from Vue.js using REST Spring-Boot API.

The problem is that you try to pass the object { username: this.username, password: this.password } as the data to the request, but you do not specify the Content-Type, which probably defaults to 'text/html' or 'application/json'. You could try to first convert that into form data and then pass it to the request, here is an example with AXIOS:
login() {
let formData = new FormData();
formData.set("username", this.username);
formData.set("password", this.password);
AXIOS.post('/login', formData, {headers: {'Content-Type': 'application/x-www-form-urlencoded'}})
.then((result) => {
this.loginSuccessful(result);
})
.catch((error) => {
this.loginFailed();
})
}
Perhaps it would also work without specifying the header, like AXIOS.post('/login', formData, null), haven't tried it.

React JS - How to authenticate credentials via a fetch statement

My goal is to create a React JS login page that runs off a json Rest service. In Postman, when I enter the URL for the service, set it to run as POST and enter the following JSON into the body:
{username: "myUserName", password: "myPassword"}
...a token is returned. So in my fetch clause, I'm using JSON.stringify to pass the username and password to the server.
I'm new to using Fetch with react, So my question is, how do I get started in authenticating various users, just using react JS with fetch only? I assume, I'm to write my logic within the second then of my Fetch clause?
Currently, my page accepts any credentials and routes the user to a landing page upon clicking the submit button. I have a function containing fetch and now calling the fetch function once the onSubmit button is clicked, which now grabs the token.
This is my code:
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './Login.css';
import { withRouter } from 'react-router-dom';
class Login extends Component {
constructor() {
super();
this.state = {
data: [],
username: "",
password: "",
token: "",
};
} //end constructor
componentWillMount() {
}
componentDidMount() {
this.fetchData();
}
fetchData() {
fetch('http://theapi/api/auth', {
method: 'POST',
headers: {
'Content-type': 'application/json',
},
body: JSON.stringify({
username: 'myUserName',
password: 'myPassword',
Authorization: 'TheReturnedToken',
})
}) /*end fetch */
.then(results => results.json())
.then(data => this.setState({ data: data })
)
}
//request the token
requestAccessToken(data) {
const loginInfo = '${data}&grant_type=password';
return fetch('${API_URL}Token', {
method: 'POST',
headers: new Headers({
'Content-Type': 'application/json',
}),
body: loginInfo,
})
.then((response) => response.json());
}
//authenticate request
requestUserInfo(token) {
return fetch('${API_URL}api/participant/userinfo', {
method: 'GET',
headers: new Headers({
Authorization: 'Bearer ${token}',
}),
})
.then((response) => response.json());
}
change = (e) => {
this.setState({
[e.target.name]: e.target.value
});
}; //end change
onSubmit = (e) =>{
this.fetchData();
e.preventDefault();
//console.log(this.state);
this.setState({
username: "",
password: "",
});
this.props.history.push('/landing');
};
render() {
console.log(this.state.data);
return (
<div>
<div className="loginContainer">
<h2>Member Login</h2>
<form>
<input
id="username"
name="username"
placeholder="User Name"
value={this.state.username}
onChange={e => this.change(e) }
className="form-control"
/> <br />
<input
id="password"
name="password"
type="password"
placeholder="Password"
value={this.state.password}
onChange={e => this.change(e) }
className="form-control"
/> <br />
<button onClick={e => this.onSubmit(e)} className="btn btn-primary">Submit</button>
</form>
</div>
</div>
);
}
}
export default withRouter(Login);
How do I get started in getting my form to authenticate various users? Basically, I'm attempting to have my page to accept a username and password and if the two match, and then route the user to a landing page.

Don't put your authorization token in the body. Put it in the Headers. The first function is going to pass in username, password, and authentication type (ie grant_type=password). Then my second function is going to use that to authenticate the request. There is no longer a need to pass any user information, because my api knows who is requesting based on the token that is passed in. The current documentation for OAuth 2.0 is here, and you can find more information about using headers with fetch at Mozilla's fetch documentation.
// request the token
// subscribe to this event and use the returned json to save your token to state or session storage
export function requestAccessToken(data) {
const loginInfo = `${data}&grant_type=password`;
return fetch(`${API_URL}Token`, {
method: 'POST',
headers: new Headers({
'Content-Type': 'application/x-www-form-urlencoded',
}),
body: loginInfo,
})
.then((response) => response.json());
// in your case set state to returned token
}
// use said token to authenticate request
export function requestUserInfo(token) {
return fetch(`${API_URL}api/participant/userinfo`, {
method: 'GET',
headers: new Headers({
Authorization: `Bearer ${token}`,
}),
})
.then((response) => response.json());
}
I would also recommend:
Calling fetch from a thunk or a saga, but this is out of scope of the question.
No need to put your token in a hidden field. Which is still accessible btw. Just keep it in state. There are other things you can do to secure it a little, but this too, is out of scope of the question.