Tengo una aplicación Next.JS donde implementé el inicio de sesión auth0 usando el código de la documentación:
// pages/api/auth/[...auth0].js import { handleAuth } from '@auth0/nextjs-auth0'; export default handleAuth(); // pages/index.js import { useUser } from '@auth0/nextjs-auth0'; export default function Profile() { const { user, error, isLoading } = useUser(); if (isLoading) return <div>Loading...</div>; if (error) return <div>{error.message}</div>; return ( user && ( <div> <img src={user.picture} alt={user.name} /> <h2>{user.name}</h2> <p>{user.email}</p> </div> ) ); }El código funciona y puedo iniciar sesión. Cuando entiendo eso correctamente, mi index.js ahora está protegido.
Luego agregué una aplicación API en auth0.
Ahora creé un pequeño servidor en node.js:
const express = require("express"); const cors = require("cors"); const morgan = require("morgan"); const helmet = require("helmet"); const jwt = require("express-jwt"); const jwks = require("jwks-rsa"); const authConfig = require("./auth_config.json"); const app = express(); const port = process.env.API_PORT || 3001; const appPort = process.env.SERVER_PORT || 3000; const appOrigin = authConfig.appOrigin || `http://localhost:${appPort}`; if (!authConfig.domain || !authConfig.audience) { throw new Error( "Please make sure that auth__config.json is in place and poplated" ); } const jwtCheck = jwt({ secret: jwks.expressJwtSecret({ cache: true, rateLimit: true, jwksRequestsPerMinute: 5, jwksUri: `https://${authConfig.domain}/.well-known/jwks.json`, }), audience: authConfig.audience, issuer: `http://${authConfig.domain}`, algorithms: ["RS256"], }); app.use(morgan("dev")); app.use(helmet()); app.use(cors({ origin: appOrigin })); app.use(jwtCheck); app.get("/api/protected", (reg, res) => { res.send({ msg: "You called the protected endpoint!", }); }); app.listen(port, () => console.log(`API server listening on port ${port}`)); Mi pregunta ahora es: ¿Cómo puedo llamar a la ruta api/protected desde index.js?
Si entiendo correctamente, ¿está preguntando cómo hacer una llamada API dentro de su componente? En caso afirmativo, a continuación se muestra un ejemplo.
import axios from "axios"; const yourfunctionName = async (email, password) => { try { const response = await axios.get(`http://localhost:3000/api/protected`, { data }); return response.data } catch (error) { console.log(error.message); } };Eche un vistazo al gancho useFetchUser de ejemplo.
Aquí, una llamada HTTP al punto final /api/me solo se envía si el usuario ha iniciado sesión.
Dentro de la página de inicio de ejemplo, el usuario se carga llamando al gancho :
const { user, loading } = useFetchUser() Haría algo similar, sin embargo, sería ligeramente diferente ya que no necesitará redirigir condicionalmente en el cuerpo de useProtectedInfo o como decida llamar a su gancho.
La estructura sería muy similar a la del ejemplo.