Can i use replit secrets for api and use fetch?

i can’t figure out how to use replit secrets properly. i want to store an api key, then use it in an http fetch request. how do i implement that?

2 Likes

What language are you using? Assuming you’re using Python in a backend, here is an example:
(Assuming you have set the secret SECRET_KEY)

from os import environ
from requests import get

token = environ["SECRET_KEY"]

res = get(
  "https://example.com",
  headers = {
    "Authorization": f"Bearer {token}",
    "Content-Type": "application/json"
  }
)
print(res.text)

However, if you need to fetch an api from the frontend with your key hidden, you will need to make the request in the backend then pass it to the frontend.

2 Likes

Sorry, i should have specified. I have written a game entirely in react, and need to use an API for some features. What would be the best way to set up a back end just for hiding API keys? I may also want to use the replit db for a simple leaderboard. I am pretty inexperienced with backend coding. Should i use python, or node.js?

4 Likes

The language for the backend depends on whichever one you prefer. The best way would just to create a simple api using express/flask which you can send a fetch request to. The api would accept the request, make a request to the api which you need a secret for, then return whatever that api returns to the fetch request.

3 Likes

As Milo said, use the backend doesn’t matter too much. If you know Python, use Flask. If you know JS (which you seem too since you have a game in React), use NodeJS. If you know both, use NodeJS because it is faster (especially on free Repls). I personally know Flask but NodeJS is also a good choice.

3 Likes

I really appreciate the responses! I am having trouble implementing a backend, or finding a good resource to figure out how to do it. Should my backend exist in a separate repl and use http requests to access it, or the same one as my react app? If in the same, how do i get simultaneous servers running for front end and back end? does anyone know a good resource to walk me through adding a simple back end to utilize replit database for my front-end project? thanks.

1 Like

You don’t need a different server for frontend, but assuming that you make a different repl for it which will be easier, I would recommend using express and replit storage.
Now I can’t think of any resources, but it is really simple to make it, and considering you only need it to hide some endpoints it should be simple, I’ll give you some boilerplate code to get started with:

// Importing modules
const express = require('express');
const fetch = require('node-fetch'); // Might use it for fetching data from API
const { Client } = require("replit-storage");

// DB client can refer to docs at npm on how to use it.
// https://www.npmjs.com/package/replit-storage
const client = new Client();
const app = express();

// Importing secret
const { API_KEY } = process.env;

// Simple get endpoint which returns Hello World!
app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.listen(3000);

thank you! i’ll get started and try this out

This got me so much further, so much faster. Working well from a separate repl. Thank you!

2 Likes

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.