Frontend code
const callLogout = async () =>{
try{
let res = await fetch('http://localhost:8000/logout',{
method:"GET",
headers:{
Accept:"application/json",
"Content-Type":"application/json"
},
credentials:"include"
})
let data = res.json()
navigate('/login',{replace:true})
if (res.status!==200){
const error = new Error(res.error)
console.log(error)
}
}
catch(err){
console.log(err)
}
}
<button onClick={callLogout} className='btn btn-primary' style={{position: 'absolute', right: '38px'}}>
Logout
</button>
Backend code
router.get('/logout' , (req , res) =>{
res.clearCookie('jwttoken' , {path:'/'})
return res.status(200)
})
the code is working properly when i login but when i click on logout button it gives cors error
Access to fetch at 'http://localhost:8000/logout' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.
About.js:10 GET http://localhost:8000/logout net::ERR_FAILED
Related
My backend-api written in Node and Express.js sets a cookie using res.cookie:
Router.post('/login', async (req, res) => {
const email = req.body.email;
const password = req.body.password;
try {
let result = await sqlite.login(email, password);
res.cookie('token', result, {
'maxAge': 3600 * 1000
});
res.send({
'token' : result
});
} catch (err) {
res.send(err);
}
});
I can make a request to this route, and I do notice the Set-Cookie header is set on the response object within Chrome developer tools:
Set-Cookie: token=[...]; Max-Age=3600; Path=/; Expires=Mon, 11 Jul 2022 14:47:08 GMT
However, document.cookie is never set by the browser. From my searching, most people say to specify the credentials field as same-origin. I have done this and it made no change. My cookie is NOT being set as HttpOnly, so I am unsure why it's being set by the browser.
Here is where I call the /login route:
async login(email, password) {
let response = await fetch(apiURL + '/login', {
'method' : 'POST',
'headers' : {
'Content-Type' : 'application/json',
'Accept' : 'application/json'
},
'credentials' : 'same-origin',
'body' : JSON.stringify({
'email' : email,
'password' : password
})
});
return await response.json();
}
A token is successfully returned in the response, but again document.cookie returns an empty string ''.
From searching this problem, most of the issues seem to suggest that same-origin should fix the issue but it is not the case for myself. Another thing of note is that httpOnly cookies won't show in the browser, but I know that the cookies I am sending are not HttpOnly.
I am using Google Chrome version 103.0.5060.114.
If I set credentials to include, I get a CORS error:
The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.
I was able to get it working with the following changes:
When initializing npm package cors, specify some options:
app.use(cors({ credentials: true, origin: 'http://lvh.me:3001' }));
The origin must include the http:// prefix as well as the correct port. Once that was done, set credentials to include when calling fetch() and it should work fine.
I've the following setup:
local domain entries in /etc/hosts:
127.0.0.1 app.spike.local
127.0.0.1 api.spike.local
I've created an express server in TypeScript:
const app = express()
app.use(cookieparser())
app.use(
cors({
origin: 'https://app.spike.local',
credentials: true,
exposedHeaders: ['Set-Cookie'],
allowedHeaders: ['Set-Cookie']
})
)
app.get('/connect/token', (req, res) => {
const jwt = JWT.sign({ sub: 'user' }, secret)
return res
.status(200)
.cookie('auth', jwt, {
domain: '.spike.local',
maxAge: 20 * 1000,
httpOnly: true,
sameSite: 'none',
secure: true
})
.send()
})
type JWTToken = { sub: string }
app.get('/userinfo', (req, res) => {
const auth = req.cookies.auth
try {
const token = JWT.verify(auth, secret) as JWTToken
console.log(req.cookies.auth)
return res.status(200).send(token.sub)
} catch (err) {
return res.status(401).json(err)
}
})
export { app }
I've created a simple frontend:
<button
id="gettoken"
class="m-2 p-1 rounded-sm bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-600 focus:ring-opacity-50 text-white"
>
Get Token
</button>
<button
id="callapi"
class="m-2 p-1 rounded-sm bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-600 focus:ring-opacity-50 text-white"
>
Call API
</button>
<div class="m-2">
Token Response Status Code:
<span id="tokenresponse" class="bg-green-100"></span>
</div>
<div class="m-2">
API Response: <span id="apifailure" class="bg-red-100"></span
><span id="apiresponse" class="bg-green-100"></span>
</div>
<script type="text/javascript">
const tokenresponse = document.getElementById('tokenresponse')
const apiresponse = document.getElementById('apiresponse')
const apifailure = document.getElementById('apifailure')
document.getElementById('gettoken').addEventListener('click', async () => {
const response = await fetch('https://api.spike.local/connect/token', {
credentials: 'include',
cache: 'no-store'
})
tokenresponse.innerHTML = response.status
})
document.getElementById('callapi').addEventListener('click', async () => {
const userInfoResponse = await fetch('https://api.spike.local/userinfo', {
credentials: 'include',
cache: 'no-store'
})
if (userInfoResponse.status === 200) {
const userInfo = await userInfoResponse.text()
apifailure.innerHTML = ''
apiresponse.innerHTML = userInfo + ' #' + new Date().toISOString()
} else {
const failure = (await userInfoResponse.json()).message
console.log(failure)
apiresponse.innerHTML = ''
apifailure.innerHTML = failure
}
})
</script>
When running the UI on https://app.spike.local and the API on https://api.spike.local both using self certificates and browsing the UI, I can successfully request a token in a cookie and subsequently use this token via cookie being sent automatically for the API call in Chrome and Firefox.
However, on Safari on macOS (and iOS) the Cookie isn't being sent in the subsequent API call.
As can be seen,
Cookie settings are SameSite=None, HttpOnly, Secure, Domain=.spike.local.
CORS has no wildcards for headers and origins and exposes and allows the Set-Cookie header as well as Access-Control-Allow-Credentials.
on client side, fetch options include credentials: 'include'
As said, both API and UI are served over SSL with valid self signed certificates.
When disabling Preferences/Privacy/Prevent cross-site tracking in Safari, everything works fine. But this not an option for this scenario in production.
What am I doing wrong here?
Solved it by changing the TLD to .com instead of .local.
The hint has been in this comment.
Having this setup:
auth server (keycloak): localhost:9990,
backend: localhost:8080,
frontend (SPA): localhost:3000
Users can "login" / obtain a token on the SPA by sending their username + password to:
http://localhost:9990/auth/realms/w/protocol/openid-connect/token
Then I call another url on the auth-server that should set the cookies that keycloak needs for SSO/remember-me (it should set some HttpOnly cookies):
.then(t => keycloakInstance.init({
token: t.access_token,
refreshToken: t.refresh_token,
checkLoginIframe: false, // required to init with token
})
.then((authenticated) => {
console.log('auth', authenticated); // <-- it is true
if (authenticated) {
return fetch('http://localhost:9990/auth/realms/w/custom-sso-provider/sso', { headers: {
Authorization: `Bearer ${keycloakInstance.token}` } })
// else
The request itself seems fine, the Set-Cookie occurs as I would expect; this is the response header:
I would now expect them to occur in devtools > Application > cookies, but unfortunately no cookies show up. Why? And what can I do about it?
I was missing credentials: 'include' for the fetch call:
return fetch('http://localhost:9990/auth/realms/w/custom-sso-provider/sso', { headers: { Authorization: `Bearer ${keycloakInstance.token}` }, credentials: 'include' })
React Client Code - Using request promises to send username and password in Header
var password = values.password;
var email = values.email;
request
.head(
"https://us-central1-simplineet-754e8.cloudfunctions.net/CreateUserAuth"
)
.set('Content-Type', 'application/x-www-form-urlencoded')
.auth(email, password, false)
.query(dataobj)
.then(res => {
console.log(res);
if (res.statusCode === 200) {
console.log("statusText",res.body);
} else {
console.log("statusText",res.statusText);
}
})
.catch(err => {});
Backend - Google Cloud Function to Handle Basic Auth Requests from Client
const express = require('express');
const app = express();
const cors = require('cors');
app.use(cors({origin: true}));
exports.CreateUserAuth = functions.https.onRequest((request, response) => {
var corsFn = cors();
corsFn(request, response, function () {
// Request Header
response.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
response.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
response.setHeader('Access-Control-Allow-Credentials', true);
response.setHeader('Access-Control-Allow-Origin', '*');
var auth = require('basic-auth') // basic-auth NPM package to extract username and password from header
var user = auth(request)
var email = user.name; // Getting username from Auth
var password = user.pass; // Getting password from Auth
var username = request.query.username;
response.send('Hello from Firebase!'); // Not getting this response in Client
});
});
Response Getting in Client :
Response {req: Request, xhr: XMLHttpRequest, text: null, statusText: "", statusCode: 200, …}
As per MDN docs, HEAD responses should not have a body:
The HTTP HEAD method requests the headers that are returned if the specified resource would be requested with an HTTP GET method. Such a request can be done before deciding to download a large resource to save bandwidth, for example.
A response to a HEAD method should not have a body. If so, it must be ignored. Even so, entity headers describing the content of the body, like Content-Length may be included in the response. They don't relate to the body of the HEAD response, which should be empty, but to the body of similar request using the GET method would have returned as a response.
My guess is that GCP is handling it as a GET and stripping out the body before returning a response.
However, keep in mind that Google Cloud Functions HTTP trigger docs don't explicitly say that HEAD is a supported method:
You can invoke Cloud Functions with an HTTP request using the POST, PUT, GET, DELETE, and OPTIONS HTTP methods.
It looks like you are making a HEAD request instead of a POST request. Change to request.post() and it should work
Let's say I want to get the firebase auth token and set it to each and every request. To fetch the firebase auth token I need to send an async call to the firebase server. Only when it completes I get the token. I tried to set it as shown below. But apollo sends the request before I get the token from firebase. How can I fix this? How can I make apollo wait?
export const client = new ApolloClient({
uri: 'http://localhost:4000/',
request: async operation => {
await firebase.auth().onAuthStateChanged(async user => {
if (user) {
const token = await firebase.auth().currentUser.getIdToken(/* forceRefresh */ true);
operation.setContext({
headers: {
authorization: token ? `Bearer ${token}` : ''
}
});
}
});
}
});