Hello webdev newbie here, i have seen this issue before in getting Failed to load resource: the server responded with a status of 401 () in /oauth/token.
My frontend is in React.js and backend is with Nest.js, it does work without issue if i set up the auth method ‘none’ but i’d like to my set up on Clinet Secret (Basic), any help would be appreciated!
// auth.strategy.ts
@Injectable()
export class Auth0Strategy extends PassportStrategy(Strategy, 'auth0') {
constructor() {
super({
clientID: process.env.AUTH0_CLIENT_ID,
clientSecret: process.env.AUTH0_CLIENT_SECRET,
domain: process.env.AUTH0_DOMAIN,
callbackURL: process.env.AUTH0_CALLBACK_URL,
scope: 'openid profile email',
state: false
});
}
async validate(accessToken, refreshToken, extraParams, profile, done): Promise<any> {
return done(null, profile);
}
}
// auth.guard.ts
@Injectable()
export class Auth0Guard extends AuthGuard('auth0') {}
async validate(accessToken, refreshToken, extraParams, profile, done): Promise<any> {
return done(null, profile);
}
}
import React, { useEffect } from 'react';
import { useAuth0 } from '@auth0/auth0-react';
import { getAllFeed } from '../api/asset';
const Feed = () => {
const { user, isAuthenticated, getAccessTokenSilently } = useAuth0();
if (!isAuthenticated) {
return <div>Loading or not authenticated...</div>;
}
return (
<div>
<h2>User Profile</h2>
{/* Display user's info */}
<p>Name: {user.name}</p>
<p>Email: {user.email}</p>
{/* ... other user information */}
</div>
);
};
export default Feed;
