I have been trying to set user data into Sentry's scope globally, so every time there's an error or event, user info is passed to it.
My app is built in Next.js, so naturally I added the config as it is in Sentry's documentation for Next.js.
I haven't got the idea on where to add the Sentry.setUser({id: user.Id}) method in order for it to set the user globally.
So far I have added it to the Sentry's _error.js file, inside the getInitialProps method:
import NextErrorComponent from 'next/error';
import * as Sentry from '#sentry/nextjs';
import { getUser } from '../lib/session';
const MyError = ({ statusCode, hasGetInitialPropsRun, err }) => {
if (!hasGetInitialPropsRun && err) {
Sentry.captureException(err);
}
return <NextErrorComponent statusCode={statusCode} />;
};
MyError.getInitialProps = async (context) => {
const errorInitialProps = await NextErrorComponent.getInitialProps(context);
const { req, res, err, asPath } = context;
errorInitialProps.hasGetInitialPropsRun = true;
const user = await getUser(req, res);
// Set user information
if (user) {
console.log('Setting user');
Sentry.setUser({ id: user.Id });
}
else {
console.log('Removing user');
Sentry.configureScope(scope => scope.setUser(null));
}
if (res?.statusCode === 404) {
return errorInitialProps;
}
if (err) {
Sentry.captureException(err);
await Sentry.flush(2000);
return errorInitialProps;
}
Sentry.captureException(
new Error(`_error.js getInitialProps missing data at path: ${asPath}`),
);
await Sentry.flush(2000);
return errorInitialProps;
};
export default MyError;
But when trying to log errors, the user info doesn't show in Sentry, only the default user ip:
I have also tried setting the user after successful login, and still nothing..
Help is appreciated!!
Not sure if this is the right way, but the above solutions didn't work for me. So I tried calling setUser inside _app.tsx.
import { useEffect } from "react";
import { setUser } from "#sentry/nextjs";
import { UserProvider, useUser } from "#auth0/nextjs-auth0";
import type { AppProps } from "next/app";
function SentryUserManager() {
const { user } = useUser();
useEffect(() => {
if (user) {
setUser({
email: user.email ?? undefined,
username: user.name ?? undefined,
});
} else {
setUser(null);
}
}, [user]);
return null;
}
export default function MyApp({ Component, pageProps }: AppProps) {
return (
<UserProvider>
<Component {...pageProps} />
<SentryUserManager />
</UserProvider>
);
}
Still not sure why this worked for me and the other solutions didn't, but figured it was worth sharing.
I would suggest using the callback handler to set your Sentry user context.
import { handleAuth, handleLogin, handleCallback } from "#auth0/nextjs-auth0";
import * as Sentry from "#sentry/nextjs";
import { NextApiHandler } from "next";
const afterCallback = (_req, _res, session, _state) => {
Sentry.setUser({
id: session.user.sub,
email: session.user.email,
username: session.user.nickname,
name: session.user.name,
avatar: session.user.picture,
});
return session;
};
const handler: NextApiHandler = handleAuth({
async login(req, res) {
await handleLogin(req, res, {
returnTo: "/dashboard",
});
},
async callback(req, res) {
try {
await handleCallback(req, res, { afterCallback });
} catch (error) {
res.status(error.status || 500).end(error.message);
}
},
});
export default Sentry.withSentry(handler);
You can set the user in Sentry right after successful login
const handleLogin = {
try {
const res = await axios.post("/login", {"john#example.com", "password"})
if (res && res?.data) {
// Do other stuff
Sentry.setUser({ email: "john#example.com" });
}
}
}
Additionaly you can clear the user while logging out
const handleLogout = {
// Do othe stuff
Sentry.configureScope(scope => scope.setUser(null));
}
Related
I followed this tutorial to setup a firebase auth store in vuex (https://www.youtube.com/watch?v=n9cERWIRgMw&list=PL4cUxeGkcC9jveNu1TI0P62Dn9Me1j9tG&index=10)
However, I'm using Nuxt which causes the last step to break.
My file:
import { auth } from "~/plugins/firebase.js";
import {
createUserWithEmailAndPassword,
signInWithEmailAndPassword,
signOut,
onAuthStateChanged,
} from "firebase/auth";
export const state = () => ({
user: null,
authIsReady: false,
});
export const mutations = {
setUser(state, payload) {
state.user = payload;
console.log("user state changed:", state.user);
},
setAuthIsReady(state, payload) {
state.authIsReady = payload;
},
};
export const actions = {
async signup(context, { email, password }) {
console.log("signup action");
const res = await createUserWithEmailAndPassword(auth, email, password);
if (res) {
context.commit("setUser", res.user);
} else {
throw new Error("could not complete signup");
}
},
async login(context, { email, password }) {
console.log("login action");
const res = await signInWithEmailAndPassword(auth, email, password);
if (res) {
context.commit("setUser", res.user);
} else {
throw new Error("could not complete login");
}
},
async logout(context) {
console.log("logout action");
await signOut(auth);
context.commit("setUser", null);
},
};
const unsub = onAuthStateChanged(auth, (user) => {
store.commit("setAuthIsReady", true);
store.commit("setUser", user);
unsub();
});
Error:
Uncaught (in promise) ReferenceError: store is not defined
at eval (index.js?9101:56:1)
at eval (index-6de4cbb9.js?3d11:2453:1)
How do I commit a mutation from here? I tried loads of things, like this.$store, $store etc.
I am trying to secure the API Route and this API route is called in the Client and Server-side on different pages.
On the test page, it returns 401 error.
On the test2 page, it returns the content well.
I guess it doesn't pass session when I send the http request in the getServerSideProps.
My question is, how do I secure the API routes used on the client and server-side?
/pages/test
import React from 'react';
import axios from 'axios';
import { getSession } from 'next-auth/react';
const Test = (props) => {
return <div>test</div>;
};
export const getServerSideProps = async (context) => {
// it returns session data
const session = await getSession(context);
// it returns error
const res = await axios.get('/api/secret');
return {
props: {
session,
secret: res.data,
},
};
};
export default Test;
/pages/test2
import React, { useEffect } from 'react';
import axios from 'axios';
import { useSession, getSession } from 'next-auth/react';
const Test = (props) => {
const { data: session } = useSession();
useEffect(() => {
const fetchData = async () => {
const res = await axios.get('/api/secret');
console.log(res.data);
};
fetchData();
}, [session]);
return <div>test</div>;
};
export default Test;
/pages/api/secret
import { getSession } from 'next-auth/react';
const handler = (req, res) => {
const { method } = req;
switch (method) {
case 'GET':
return getSomething(req, res);
default:
return res.status(405).json('Method not allowed');
}
};
const getSomething = async (req, res) => {
const session = await getSession({ req });
console.log(session);
if (session) {
res.send({
content: 'Welcome to the secret page',
});
} else {
res.status(401).send({
err: 'You need to be signed in.',
});
}
};
export default handler;
I found a solution.
export const getServerSideProps = async (ctx) => {
const session = await getSession(ctx);
const headers = ctx.req.headers;
if (session) {
const data = (
await axios.get(`${process.env.NEXTAUTH_URL}/api/secret`, {
headers: { Cookie: headers.cookie },
})
return {
props: {
data,
},
};
} else {
return {
redirect: {
destination: '/login',
permanent: false,
},
};
}
};
/pages/api/secret
import { getSession } from 'next-auth/react';
const handler = async (req, res) => {
const { method } = req;
switch (method) {
case 'GET':
return await getSomething(req, res);
default:
return res.status(405).json('Method not allowed');
}
};
const getSomething = async (req, res) => {
const session = await getSession({ req });
// console.log(session);
if (session) {
res.send({
content: 'Welcome to the secret page',
});
} else {
res.status(401).send({
err: 'You need to be signed in.',
});
}
};
export default handler;
There is a specific method to handle request from serverSideProps, better than using useSession (which is meant for client requests)
https://next-auth.js.org/tutorials/securing-pages-and-api-routes#server-side
Best use unstable_getServerSession as mentioned in the documentation example
await unstable_getServerSession(req, res, authOptions)
with the authOptions coming as an export from your [...nextauth].js
I'm trying to implement my signUp screen here is the signup handle that is being called, the signup page calls, and pass in the value to my context page.
const handleSignup = async () => {
setLoading(true)
const user = { fullname, email, password, profilePhoto};
try {
const createdUser = await firebase.createUser(user)
setUser({ ...createdUser, isLoggedIn: true });
} catch (error) {
console.log("Error #signUp: ", error);
} finally {
setLoading(false)
}
};
the firebaseContext page then takes in the value that has been passed in creates the account
const FirebaseContext = createContext();
if(!firebase.apps.length){
firebase.initializeApp(auth);
}
const db = firebase.firestore();
const Firebase = {
getCurrentUser: () => {
return firebase.auth().currentUser
},
createUser: async (user) => {
try{
await firebase.auth().createUserWithEmailAndPassword(user.email, user.password);
const uid = Firebase.getCurrentUser().uid;
let profilePhotoUrl = "default";
await db.collection("users").doc(uid).set({
fullname: user.fullname,
email: user.email,
profilePhotoUrl
})
if(user.profilePhoto){
profilePhotoUrl = await Firebase.uploadProfilePhoto(user.profilePhoto);
}
delete user.password;
return { ...user, profilePhotoUrl, uid};
}catch(error){
console.log("Error #createUser", error.message);
}
},
Exporting the file
import { FirebaseContext, FirebaseProvider, Firebase } from './FirebaseContext';
import { UserContext, UserProvider } from './UserContext';
export { FirebaseContext, Firebase, FirebaseProvider, UserContext, UserProvider };
Importing the file
import { FirebaseContext } from "../context";
I am trying to check if a user is authenticated and redirect them depending on the page they are in. for example if the user is logged in and they try to visit the login or signup page, they should be redirected. I have a middleware for that.
when I log in the user, the authenticateUser action runs and the user is created, when I check my cookies and local storage on the browser, I see that it is set correctly, but when I visit the login page after logging in, it doesn't redirect me.
middleware/altauth.js
export default function (context) {
console.log(context.store.getters('profile/isAuthenticated'))
if (context.store.getters.isAuthenticated) {
context.redirect('/')
}
}
also the token is both saved using Cookies and local storage and is persistence is through this middleware
middleware/checkauth.js
export default function (context) {
if(context.hasOwnProperty('ssrContext')) {
context.store.dispatch('profile/initAuth', context.ssrContext.req);
} else {
context.store.dispatch('profile/initAuth', null);
}
}
and below are the values for my store
import Cookie from 'js-cookie';
export const state = () => ({
token: null,
})
export const mutations = {
setToken(state, token) {
state.token = token
},
clearToken(state) {
state.token = null
}
}
export const actions = {
async authenticateUser(vuexContext, authData) {
let authUrl = 'https://look.herokuapp.com/signup/'
if (authData.isLogin) {
authUrl = 'https://look.herokuapp.com/login/'
}
return this.$axios
.$post(authUrl, authData.form)
.then(data => {
console.log(data);
const token = data.token
vuexContext.commit('setToken', token)
localStorage.setItem("token", token)
Cookie.set('jwt', token);
})
.catch(e => console.log(e))
},
initAuth(vuexContext, req) {
let token
if (req) {
if (!req.headers.cookie) {
return;
}
const jwtCookie = req.headers.cookie
.split(';')
.find(c => c.trim().startsWith('jwt='));
if (!jwtCookie) {
return;
}
token = jwtCookie.split('=')[1];
} else {
token = localStorage.getItem('token');
if (!token) {
return;
}
}
vuexContext.commit('setToken', token);
}
}
export const getters = {
isAuthenticated(state) {
return state.token != null;
},
}
please help, i don't know what the problem can be
Here is a basic but full example for auth system in SSR nuxt
You will need two apis for this, one will return token info with user info, and the other will return user info only.
for example
POST http://example.com/api/auth/authorizations
{
token: 'abcdefghijklmn',
expired_at: 12345678,
user: {
name: 'Tom',
is_admin: true
}
}
// this need authed
GET http://example.com/api/auth/user
{
name: 'Tom',
is_admin: true
}
nuxt.config.js
plugins:[
'~plugins/axios',
],
buildModules: [
'#nuxtjs/axios',
],
router: {
middleware: [
'check-auth'
]
},
./pages/login.vue
<template>
<form #submit.prevent="login">
<input type="text" name="username" v-model="form.username">
<input type="password" name="password" v-model="form.password">
</form>
</template>
<script type="text/javascript">
export default{
data(){
return {
form: {username: '', password: ''}
}
},
methods: {
login(){
this.$axios.post(`/auth/authorizations`, this.form)
.then(({ data }) => {
let { user, token } = data;
this.$store.commit('auth/setToken', token);
this.$store.commit('auth/updateUser', user);
this.$router.push('/');
})
}
}
}
</script>
store/index.js
const cookieFromRequest = (request, key) => {
if (!request.headers.cookie) {
return;
}
const cookie = request.headers.cookie.split(';').find(
c => c.trim().startsWith(`${key}=`)
);
if (cookie) {
return cookie.split('=')[1];
}
}
export const actions = {
nuxtServerInit({ commit, dispatch, route }, { req }){
const token = cookieFromRequest(req, 'token');
if (!!token) {
commit('auth/setToken', token);
}
}
};
middleware/check-auth.js
export default async ({ $axios, store }) => {
const token = store.getters['auth/token'];
if (process.server) {
if (token) {
$axios.defaults.headers.common.Authorization = `Bearer ${token}`;
} else {
delete $axios.defaults.headers.common.Authorization;
}
}
if (!store.getters['auth/check'] && token) {
await store.dispatch('auth/fetchUser');
}
}
store/auth.js
import Cookie from 'js-cookie';
export const state = () => ({
user: null,
token: null
});
export const getters = {
user: state => state.user,
token: state => state.token,
check: state => state.user !== null
};
export const mutations = {
setToken(state, token){
state.token = token;
},
fetchUserSuccess(state, user){
state.user = user;
},
fetchUserFailure(state){
state.user = null;
},
logout(state){
state.token = null;
state.user = null;
},
updateUser(state, { user }){
state.user = user;
}
}
export const actions = {
saveToken({ commit }, { token, remember }){
commit('setToken', token);
Cookie.set('token', token);
},
async fetchUser({ commit }){
try{
const { data } = await this.$axios.get('/auth/user');
commit('fetchUserSuccess', data);
}catch(e){
Cookie.remove('token');
commit('fetchUserFailure');
}
},
updateUser({ commit }, payload){
commit('updateUser', payload);
},
async logout({ commit }){
try{
await this.$axios.delete('/auth/authorizations');
}catch(e){}
Cookie.remove('token');
commit('logout');
}
}
plugins/axios.js
export default ({ $axios, store }) => {
$axios.setBaseURL('http://example.com/api');
const token = store.getters['auth/token'];
if (token) {
$axios.setToken(token, 'Bearer')
}
$axios.onResponseError(error => {
const { status } = error.response || {};
if (status === 401 && store.getters['auth/check']) {
store.commit('auth/logout');
}
else{
return Promise.reject(error);
}
});
}
Then you can do what you want in your middleware, such as check auth
middleware/auth.js
export default function ({ store, redirect }){
if (!store.getters['auth/check']) {
return redirect(`/login`);
}
}
I have this problem with my code, it likes to re-render and reconnect to the server multiple times, and I'd like to have it so it'll connect when they log in, meaning that it would have to use my "useAuth()" function which uses a different context.
Is there any way to prevent the re-render so it doesn't reconnect multiple times and only connects once?
This is my code:
import React, { useEffect } from "react";
import { useAuth } from "./AuthContext";
import { io } from "socket.io-client";
const SocketContext = React.createContext({});
export const SocketProvider = ({ children }) => {
const { isAuthenticated, user } = useAuth();
useEffect(() => {
if (isAuthenticated) {
const socket = io("ws://localhost:3002", {
reconnectionDelayMax: 10000,
auth: {
token: user.socketAuth,
},
});
socket.on("connect_error", (err) => {
if (err instanceof Error) {
console.log(err.message);
console.log(err.data);
}
});
}
}, []);
return <SocketContext.Provider value="">{children}</SocketContext.Provider>;
};
Never mind, I fixed the issue, it was working how it was supposed to be. It was the server that wasn't accepting the connection and it just kept logging the ID of the socket and not actually letting it connect.
io.use(async (socket, next) => {
const user = await User.findOne({ socketAuth: socket.handshake.auth.token });
if (!user) {
const err = new Error("Unauthorized");
err.data = { message: "Unauthorized, please try again later." };
next(err);
}
next(); // New line added to allow connection
});