Develop Reference

Next js: Middleware set current users

So basically here is the scenario. The user tries to access a protected API link. During the request stage, The Next.js middleware checks if the token is correct, decodes the token and then creates a current user property with response.user and if possible, checks if the exists on the MongoDB database
This is what the middleware.js currently looks like
interface CustomNextResponse extends NextResponse {
request: {
userId: string;
};
}
export async function sign(payload: JwtPayload, secret: string): Promise<string> {
const iat = Math.floor(Date.now() / 1000);
const exp = iat + 60 * 60; // one hour
return new SignJWT({ ...payload })
.setProtectedHeader({ alg: 'HS256', typ: 'JWT' })
.setExpirationTime(exp)
.setIssuedAt(iat)
.setNotBefore(iat)
.sign(new TextEncoder().encode(secret));
}
export async function verify(token: string, secret: string): Promise<JwtPayload> {
const { payload } = await jwtVerify(token, new TextEncoder().encode(secret));
return payload;
}
export async function middleware(request: NextRequest) {
try {
const refreshToken = request.cookies.get('X-Refresh-Token')?.value;
const requestHeaders = new Headers(request.headers);
const bearerToken = requestHeaders.get('Authorization');
if (!refreshToken) {
throw new Error('Unauthorized');
}
if (!bearerToken) {
throw new Error('Unauthorized');
}
const accessToken = bearerToken.split(' ')[1];
if (!accessToken) {
throw new Error('Unauthorized');
}
const decode: JwtPayload = (await verify(accessToken, secretKey)) as JwtPayload;
const response = NextResponse.next() as CustomNextResponse;
response.request = {
userId: decode.id
}
return response;
} catch (error) {
const errorObject = error as Error;
return new NextResponse(JSON.stringify({ success: false, message: errorObject.message }), {
status: 401,
headers: { 'content-type': 'application/json' },
});
}
}
But in the Nextapi at pages/api/me I can neither access the property with req nor res
async function handler(req: CustomNextApiRequest, res: NextApiResponse) {
//req.userId and res.userId give me undefined
Is it case the case then that middleware cant does not store custom properties to be accessed when making a request the same that Express.js does it? plus can you access MongoDB within the middleware?

How to retrieve an OpenAI image and save it to an S3 bucket

I want to get an image generated in OpenAI/Dall E and save it to an S3 Bucket.
So far I can get the image URL and create a buffer, with the following:
const configuration = new Configuration({
apiKey: procEnvVars.OPENAI_API_KEY,
});
export const openai = new OpenAIApi(configuration);
const defaultImageParams: CreateImageRequest = {
n: 1,
prompt: "a bad request message",
};
interface InputParams extends CreateImageRequest {
prompt: string; // make this mandatory for the function params
}
// Once we get a URL from the OpenAI API, we want to convert it to a buffer
export async function getBufferFromUrl(openAiUrl: string) {
const axiosResponse = await axios({
url: openAiUrl, //your url
method: "GET",
responseType: "arraybuffer",
});
const data = axiosResponse.data;
if (!(data instanceof Buffer))
throw new Error("Axios response should be of type Buffer");
return data;
}
export async function getUrlFromOpenAi(inputParams: InputParams) {
const ImageResponse = await openai.createImage({
...defaultImageParams,
...inputParams,
});
const dataArray = ImageResponse.data.data;
if (!dataArray || dataArray.length === 0) {
console.error({
error: "We did not return choices from createOpenAiImage()",
data: ImageResponse.data,
datadata: ImageResponse.data.data,
});
}
return dataArray;
}

Next we need to take the buffer and save to S3:
// Create service client module using ES6 syntax.
import { S3Client } from "#aws-sdk/client-s3";
// Set the AWS Region.
const REGION = "eu-west-2";
// Create an Amazon S3 service client object.
const s3Client = new S3Client({ region: REGION });
export { s3Client };
// Import required AWS SDK clients and commands for Node.js.
import { PutObjectCommand } from "#aws-sdk/client-s3";
// Set the parameters.
export const bucketParams = {
Bucket: "<my s3 bucket name. Can be found in S3 console>",
};
// Create and upload an object to the S3 bucket.
export async function putS3Object(inputParams: { Body: Buffer; Key: string }) {
try {
const data = await s3Client.send(
new PutObjectCommand({
...bucketParams,
Body: inputParams.Body,
Key: `public/myFolder/${inputParams.Key}`,
})
);
console.log(
"Successfully uploaded object: " +
bucketParams.Bucket +
"/" +
`public/myFolder/${inputParams.Key}`
);
return data; // For unit tests.
} catch (err) {
console.log("Error", err);
}
}

Websocket with AppSync: Error UnsupportedOperation, unknown not supported through the realtime channel

I'm trying to send a subscription over a Websocket connection to AppSync. But when I send the request, I get the error {errorType: "UnsupportedOperation", message: "unknown not supported through the realtime channel"}
Here's my test code (yes, a little messy :) ):
let ws = undefined;
const id = 'XXX';
const region = 'YYY';
const apikey = 'ZZZ';
const host = id + '.appsync-api.' + region + '.amazonaws.com';
const url = 'wss://' + id + '.appsync-realtime-api.' + region + '.amazonaws.com';
const httpUrl = 'https://' + host + '/graphql';
function openWebsocket(){
const api_header = {
host: host,
'x-api-key': apikey,
};
// payload should be an empty JSON object
const payload = {};
const base64_api_header = btoa(JSON.stringify(api_header));
const base64_payload = btoa(JSON.stringify(payload));
const appsync_url = url + '?header=' + base64_api_header + '&payload=' + base64_payload;
return new WebSocket(appsync_url, ['graphql-ws']);
}
function runWebsocket() {
ws = openWebsocket();
/**
* Send request over websocket
* (Convenience function)
*/
const _send = (obj) => {
ws.send(JSON.stringify(obj));
};
let initializingMode = true;
ws.onopen = (e) => {
// initialization phase start:
_send({ type: 'connection_init' });
};
ws.onmessage = (e) => {
const data = JSON.parse(e.data);
if (initializingMode) {
if (data.type == 'connection_ack') {
// Acknowledge came, so we can start subscribing
// try to subscribe
{
const query = {
query: `subscription MySubscription {
onCreateNotifications {
creationTime
userid
}
}`,
};
const queryStr = JSON.stringify(query);
_send({
id: localStorage.getItem(HeaderItems.idToken),
type: 'start',
payload: {
data: queryStr,
},
authorization: {
host: host,
'x-api-key': apikey,
},
});
}
initializingMode = false;
return;
}
}
};
};

I think you need to put the "authorization" object inside an "extensions" property:
_send({
id: localStorage.getItem(HeaderItems.idToken),
type: 'start',
payload: {
data: queryStr,
extensions: { /* The authorization needs to be wrapped here */
authorization: {
host: host,
'x-api-key': apikey,
},
}
},
});
See: https://docs.aws.amazon.com/appsync/latest/devguide/real-time-websocket-client.html - search for "Example using a custom domain name".

How can I pass auth headers to other components

So I have recently stared to work with react, I am authenticating a user in my App component like this:
App
signIn(userData) {
console.log(userData)
//do a fetch call to get/users
axios.get('http://localhost:5000/api/users', {
auth: { //set auth headers so that userData will hold the email address and password for the authenticated user
username: userData. emailAddress,
password: userData.password
}
}).then(results => { console.log(results.data)
this.setState({
//set the authenticated user info into state
emailAddress: results.data,
password: results.data.user
});
})
}
and I also have another component called CreateCourse that allows a post request only if I provided the auth header from App,
CreateCourse
handleSubmit = event => {
event.preventDefault();
console.log(this.props)
const newCourse = {
title: this.state.title,
description: this.state.description,
estimatedTime: this.state.estimatedTime,
materialsNeeded: this.state.materialsNeeded
};
axios({
method: 'post',
url: 'http://localhost:5000/api/courses',
auth: {
username: this.props.emailAddress,
password: this.props.password
},
data: newCourse
}).then(
alert('The course has been successfully created!')
).then( () => {
const { history } = this.props;
history.push(`/`)
})
};
I was wondering if I could pass the auth header from App to the children components without using props or context api so that I don't have to manually put the auth headers on every axios request, for reference this is my repo : https://github.com/SpaceXar20/full_stack_app_with_react_and_a_rest_api_p10

I always create a singleton axios instance and set header for it after user signin successful.
let instance = null
class API {
constructor() {
if (!instance) {
instance = this
}
this.request = Axios.create({
baseURL: 'http://localhost:5000',
})
return instance
}
setToken = (accessToken) => {
this.request.defaults.headers.common.authorization = `Bearer ${accessToken}`
}
createCourses = () => this.request.post(...your post request...)
}
export default new API()
After your login successfull, you need call API.setToken(token). Then, when you call Api.createCourse(), the request will have token in headers.

singleton axios instance is the right approach . In the same pattern, use the below method .Import the file wherever required and use axiosapi.get .
const axiosConfig = {auth: {username: XXXX, password: YYYY}};
const axiosservice = axios.create(axiosConfig);
export const axiosapi = {
/**
* Describes the required parameters for the axiosapi.get request
* #param {string} url
* #param {Object} config - The configfor the get request (https://github.com/axios/axios#request-config)
*
* #returns {Promise}
*/
get: (url, config = {}, params) => {
return axiosservice.get(url, {
params,
responseType: 'json',
transformResponse: [
data => {
const parsedData = typeof data === 'string' ? JSON.parse(data) : data;
return get(parsedData);
},
],
...config,
})
.then()
.catch(error => {
return Promise.reject(error);
});
},
}

Binance API Hmac Signature

please help I don't know what is wrong with my code.
Endpoints that doesn't need signature work fine, so I guess is a problem with how I am getting the signature. I am getting this error:
data: { code: -2014, msg: 'API-key format invalid.' } } }
API Doc: https://github.com/binance-exchange/binance-official-api-docs/blob/master/rest-api.md
SIGNED endpoints require an additional parameter, signature, to be
sent in the query string or request body. Endpoints use HMAC SHA256
signatures. The HMAC SHA256 signature is a keyed HMAC SHA256
operation. Use your secretKey as the key and totalParams as the value
for the HMAC operation. The signature is not case sensitive.
totalParams is defined as the query string concatenated with the
request body.
My code:
const axios = require('axios');
const crypto = require('crypto');
const qs = require('qs');
const binanceConfig = {
API_KEY: 'XXXXXXX',
API_SECRET: 'XXXXXX',
HOST_URL: 'https://api.binance.com',
};
const buildSign = (data, config) => {
return crypto.createHmac('sha256', config.API_SECRET).update(data).digest('hex');
};
const privateRequest = async (data, endPoint, type) => {
const dataQueryString = qs.stringify(data);
const signature = buildSign(dataQueryString, binanceConfig);
const requestConfig = {
method: type,
url: binanceConfig.HOST_URL + endPoint + '?' + dataQueryString + '&signature=' + signature,
headers: {
'Authorization': `X-MBX-APIKEY: ${binanceConfig.API_KEY}`,
},
};
try {
console.log('URL: ', requestConfig.url);
const response = await axios(requestConfig);
console.log(response);
return response;
}
catch (err) {
console.log(err);
return err;
}
};
const data = {
symbol: 'ARKBTC',
recvWindow: 20000,
timestamp: Date.now(),
};
privateRequest(data, '/api/v3/openOrders', 'GET');

Try setting the headers object to have a key of X-MBX-APIKEY directly:
headers: {
'X-MBX-APIKEY': binanceConfig.API_KEY,
},