I'm trying to test a page in NextJs that has a firebase context provider that initializes firebase and another that controls access to firebase/auth. In the Auth Context I import things I need directly, like so:
import {
getAuth,
User,
signInWithEmailAndPassword,
createUserWithEmailAndPassword,
UserCredential,
signOut,
signInWithPopup,
GoogleAuthProvider,
} from "firebase/auth";
But Jest doesn't seem to like it, because I get this error:
SyntaxError: Unexpected token 'export'
15 | createUserWithEmailAndPassword,
16 | UserCredential,
> 17 | signOut,
| ^
18 | signInWithPopup,
19 | GoogleAuthProvider,
20 | } from "firebase/auth";
I do have ts-jest installed, and I saw a fix somewhere using babel but I'm not too fond of using babel with NextJS, is there another way to fix this issue?
You could use next-firebase-auth
it also shows how to set your app for jest:
// Create a mock FirebaseUser instance with the fields that you use.
const mockFirebaseUser = {
displayName: 'Banana Manana',
// ... other fields from firebaseUser that you may use
}
/**
* Build and return a dummy AuthUser instance to use in tests.
*
* #arg {boolean} isLoggedIn - Pass `false` to mimic a logged out user.
* #returns {AuthUserContext} - A mocked AuthUser instance, with 'serialize' added.
*/
const getMockAuthUser = (isLoggedIn = true) => ({
id: isLoggedIn ? 'abcd1234' : null,
email: isLoggedIn ? 'banana#banana.com' : null,
emailVerified: isLoggedIn,
getIdToken: jest.fn(async () => (isLoggedIn ? 'i_am_a_token' : null)),
clientInitialized: isLoggedIn,
firebaseUser: isLoggedIn ? mockFirebaseUser : null,
signOut: jest.fn(),
serialize: jest.fn(() => 'serialized_auth_user'),
})
export default getMockAuthUser
Related
I have this multi layered application entirely hosted on GCP. At the moment, we only have the back-end part. Front-end and API are to be developed. For the front-end, the decision has been made - it will be a React.js app hosted on Firebase Hosting and the authentication method will be Email/password and users will be provisioned manually through the Firebase Hosting UI.
As we'd like to have a re-usable middle layer (API) we're in a process of making a decision what type of a solution to be used for our middle layer. The main request here is only logged in users to be able to call the API endpoints. Eventually, there will be also a native/mobile application which will have to also be able to make authenticated requests to the API.
My question here is, what type of GCP service is advised to pick here? I want it to be light, scalable and price optimized. Preferred programming language would be C# but Node.js would be also acceptable.
Firebase Functions would work well for this authenticated API. With a function, you can simply check for the existence of context.auth.uid before proceeding with the API call.
https://firebase.google.com/docs/functions/callable
You'll want to use the .onCall() method to access this context.auth object.
Here's an example I took from one of my active Firebase projects which uses this concept:
Inside your functions>src folder, create a new function doAuthenticatedThing.ts
/**
* A Firebase Function that can be called from your React Firebase client UI
*/
import * as functions from 'firebase-functions';
import { initializeApp } from 'firebase/app';
import { connectFirestoreEmulator, getFirestore, getDocs, query, where, collection } from 'firebase/firestore';
import firebaseConfig from './firebase-config.json';
let isEmulator = false;
const doAuthenticatedThing = functions
.region('us-west1')
.runWith({
enforceAppCheck: true,
memory: '256MB',
})
.https.onCall(async (_data, context) => {
// disable if you don't use app-check verify (you probably should)
if (context.app == undefined) {
throw new functions.https.HttpsError(
'failed-precondition',
'The function must be called from an App Check verified app.',
);
}
// checks for a firebase authenticated frontend user
if (context.auth == undefined) {
throw new functions.https.HttpsError(
'failed-precondition',
'The user must be authenticated.',
);
}
// establish firestore db for queries
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
// start the emulator
if (process.env.MODE === 'development' && !isEmulator) {
connectFirestoreEmulator(db, '127.0.0.1', 6060);
isEmulator = true;
}
// obtain the user's firebase auth UID
const uuid = context?.auth?.uid as string;
// do some database stuff
const ref = collection(db, 'collection-name');
const q = query(ref, where(uuid, '==', uuid));
const results = await getDocs(q);
if (results.empty) {
throw new functions.https.HttpsError(
'internal',
'There were no results found!',
);
}
// prepare document data
const data: Array<any> = [];
// gather chats, and an array of all chat uids
results.forEach((d) => {
data.push({ id: d.id, data: d.data() });
});
return data;
});
export default doAuthenticatedThing;
Make sure to reference this new Firebase Function in the functions/src/index.ts file.
import doAuthenticatedThingFn from './doAuthenticatedThing';
export const doAuthenticatedThing = doAuthenticatedThingFn;
Create a frontend React Hook so any component can use any function you make. Call it useGetFunction.ts
import { getApp } from 'firebase/app';
import { getFunctions, HttpsCallable, httpsCallable } from '#firebase/functions';
const useGetFunction = (functionName: string): HttpsCallable<unknown, unknown> => {
const app = getApp();
const region = 'us-west1';
const functions = getFunctions(app, region);
return httpsCallable(functions, functionName);
};
export default useGetFunction;
Now you can simply get this function and use it in any React component:
const SomeComponent = () => {
const doAuthenticatedThing = useGetFunction('doAuthenticatedThing');
useEffect(() => {
(async () => {
const results = await doAuthenticatedThing();
})();
}, []);
};
I search to stub a ~/server/middleware/auth server middleware, i.e. a simple true/false server auth middleware. In the present situation, I am making integration tests in the backend of the app. A route is first called, then the returned response and the value updated in the database are checked.
I have cases with authentication: ensure the route returns the expected error if the user is not logged in.
Current behavior:
check a JsonWebToken emitted by an active directory
Expected behavior of the middleware:
import { Ref } from '#vue/runtime-dom'
import { ref } from 'vue'
import { defineEventHandler } from 'h3'
const NOT_LOGGED_IN = null
export const isLoggedIn: Ref<{ email: string, name: string } | typeof NOT_LOGGED_IN> = ref(NOT_LOGGED_IN)
export const useAuthUserMock = () => ({
resetAuthMockUser: () => isLoggedIn.value = NOT_LOGGED_IN,
setAuthMockUser: (email = 'user.mock#email.com', name = 'User Mock') => {
isLoggedIn.value = {
email, name
}
}
})
export default defineEventHandler((event) => {
event.context.auth = isLoggedIn.value
})
I tried:
another nuxt.config.ts with a different (not possible, custom director
vi.mock() but the original middleware is still used instead of the mock
I'm trying to set up a scheduled firebase function that will export all collections in Firestore every 24 hours. I'm using this script for that:
import {fs} from '../services/firestore';
import * as functions from 'firebase-functions';
import * as firestore from '#google-cloud/firestore';
const client = new firestore.v1.FirestoreAdminClient();
const bucket = 'gs://my-cool-backup';
export const scheduledFirestoreExport = functions
.region('europe-west1')
.pubsub
.schedule('every 24 hours')
.onRun(async (context) => {
const collections = await fs.listCollections();
const projectId = process.env.GCP_PROJECT || process.env.GCLOUD_PROJECT;
const databaseName =
client.databasePath(projectId, '(default)');
const responses = await client.exportDocuments({
name: databaseName,
outputUriPrefix: bucket,
collectionIds: collections.map(x => x.id)
});
const response = responses[0];
console.log(`Operation Name: ${response['name']}`);
return response;
});
../services/firestore looks like this:
import * as settings from '../settings.json';
import * as serviceAccount from '../firebase-admin.json';
import * as admin from 'firebase-admin';
export const fs = admin.initializeApp({
credential: admin.credential.cert(serviceAccount as any),
...settings.firebase
}).firestore();
When I trigger the function using the Google Cloud Platform, this is the output:
Error: function execution failed. Details:
7 PERMISSION_DENIED: The caller does not have permission
The service account I'm using has the following permissions
I have many functions running without any problems, just this one is failing. I suspect it's because of #google-cloud/firestore, whereas the other ones only use firebase-admin
The error message gives me very little to go with. What am I missing here?
This is most certainly an issue with permission on the service account you are using.
You can follow this link for settings Role (roles/datastore.user) [1], [2] for firestore on service account
[1]https://cloud.google.com/firestore/docs/quickstart-servers#set_up_authentication
[2]https://cloud.google.com/firestore/docs/security/iam#roles
I'm using Nextjs and deploying it with Zeit now.
I'm trying to implement session management using Firebase auth and what I'm trying to do is to set cookies on the user's request. I have the following function:
import { NextApiRequest, NextApiResponse } from 'next';
// Initializing firebase admin
import admin from '../../helpers/firebase/init';
const db = admin.firestore();
const handler = async (req: NextApiRequest, res: NextApiResponse) => {
try {
// ...
const sessionCookieRxpiresIn = 60 * 60 * 24 * 5 * 1000;
const sessionCookie = await admin
.auth()
.createSessionCookie(idToken, { expiresIn: sessionCookieRxpiresIn });
res.setHeader(
'Set-Cookie',
`session=${sessionCookie};Max-Age=${sessionCookieRxpiresIn};HttpOnly;Path=/`,
);
res.status(200).json({
success: true,
});
} catch (error) {
// ...
}
};
export default handler;
This function works just fine locally with now dev, but when I'm deploying it to now, I see the following error after invoking this function ENOENT: no such file or directory, open 'google/protobuf/api.proto'.
I didn't find any valuable advice on the internet to help me deal with this issue. Any advice?
I followed the example in the documentation under v2.0.0 > Read Me > Load Data (listeners automatically managed on mount/unmount) (direct link is not possible).
And replaced the connect call with the firestore specific one shown here](http://react-redux-firebase.com/docs/firestore.html#examples) in Example 1.
I copied the Todo example exactly in a new component created for testing purposes.
Todo Component:
import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { compose } from 'redux'
import { firebaseConnect,firestoreConnect, isLoaded, isEmpty } from 'react-redux-firebase'
const Todos = ({ todos, firebase }) => {
// Build Todos list if todos exist and are loaded
const todosList = !isLoaded(todos)
? 'Loading'
: isEmpty(todos)
? 'Todo list is empty'
: Object.keys(todos).map(
(key, id) => (
<TodoItem key={key} id={id} todo={todos[key]}/>
)
)
return (
<div>
<h1>Todos</h1>
<ul>
{todosList}
</ul>
<input type="text" ref="newTodo" />
<button onClick={this.handleAdd}>
Add
</button>
</div>
)
}
// export default compose(
// firestoreConnect([
// 'todos' // { path: '/todos' } // object notation
// ]),
// connect((state) => ({
// todos: state.firestore.data.todos,
// profile: state.firestore.profile // load profile
// }))
// )(Todos)
export default compose(
firestoreConnect(['todos']), // or { collection: 'todos' }
connect((state, props) => ({
todos: state.firestore.ordered.todos
}))
)(Todos)
The store configuration was configured as shown here in the docs. The store configuration was adapted to slot into the framework created by react-boilerplate.
/**
* Create the store with dynamic reducers
*/
import { createStore, applyMiddleware, compose } from 'redux'
import { fromJS } from 'immutable'
import { routerMiddleware } from 'connected-react-router/immutable'
import createSagaMiddleware from 'redux-saga'
import { reactReduxFirebase, firebaseReducer } from 'react-redux-firebase'
import { reduxFirestore, firestoreReducer } from 'redux-firestore'
import firebase from 'firebase/app'
import 'firebase/auth'
import 'firebase/database'
import 'firebase/firestore'
import createReducer from './reducers'
const sagaMiddleware = createSagaMiddleware()
const firebaseConfig = {
apiKey: process.env.FIREBASE_API_KEY,
authDomain: process.env.AUTH_DOMAIN,
databaseURL: process.env.DATABASE_URL,
projectId: process.env.PROJECT_ID,
storageBucket: process.env.STORAGE_BUCKET,
messagingSenderId: process.env.MESSAGING_SENDER_ID,
}
const rrfConfig = {
userProfile: 'users',
// useFirestoreForProfile: true, // Firestore for Profile instead of Realtime DB
// attachAuthIsReady: true
}
// Initialize Cloud Firestore through Firebase
export default function configureStore(initialState = {}, history) {
firebase.initializeApp(firebaseConfig)
// Initialize Firestore with timeshot settings
firebase.firestore()
// firebase.firestore().settings({ timestampsInSnapshots: true })
// Create the store with two middlewares
// 1. sagaMiddleware: Makes redux-sagas work
// 2. routerMiddleware: Syncs the location/URL path to the state
const middlewares = [sagaMiddleware, routerMiddleware(history)]
const enhancers = [
applyMiddleware(...middlewares),
// reactReduxFirebase(config), // enhancing our store with these packages
// reduxFirestore(config)
]
// If Redux DevTools Extension is installed use it, otherwise use Redux compose
/* eslint-disable no-underscore-dangle, indent */
const composeEnhancers =
process.env.NODE_ENV !== 'production' &&
typeof window === 'object' &&
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({})
: compose
/* eslint-enable */
const createStoreWithFirebase = compose(
reactReduxFirebase(firebase, rrfConfig), // firebase instance as first argument
reduxFirestore(firebase),
)(createStore)
const store = createStoreWithFirebase(
createReducer(),
fromJS(initialState),
composeEnhancers(...enhancers),
)
// Extensions
store.runSaga = sagaMiddleware.run
store.injectedReducers = {} // Reducer registry
store.injectedSagas = {} // Saga registry
// Make reducers hot reloadable, see http://mxs.is/googmo
/* istanbul ignore next */
if (module.hot) {
module.hot.accept('./reducers', () => {
store.replaceReducer(createReducer(store.injectedReducers))
})
}
return store
}
I traced and verified my store configuration exactly to make sure all steps present in the documentation are configured correctly in my configuration.
My createReducer funciton is in a seperate file and you can see that I added the firebaseReducer and firebaseReducer correctly.
import { combineReducers } from 'redux-immutable'
import { connectRouter } from 'connected-react-router/immutable'
import { firebaseReducer } from 'react-redux-firebase'
import { firestoreReducer } from 'redux-firestore'
import history from 'utils/history'
import languageProviderReducer from 'containers/LanguageProvider/reducer'
export default function createReducer(injectedReducers = {}) {
const rootReducer = combineReducers({
firebase: firebaseReducer,
firestore: firestoreReducer,
language: languageProviderReducer,
...injectedReducers,
})
// Wrap the root reducer and return a new root reducer with router state
const mergeWithRouterState = connectRouter(history)
return mergeWithRouterState(rootReducer)
}
My redux store contains the firestore and firebase and it is injected into the component props.
What does not work is the use of connectFirestore HoC to automatically retrieve and inject a list of documents in to the component.
This is the error message:
react-dom.development.js?61bb:20266 Uncaught TypeError: Cannot read property 'ordered' of undefined
at Function.eval [as mapToProps] (index.js?d834:49)
at mapToPropsProxy (wrapMapToProps.js?1817:54)
at Function.detectFactoryAndVerify (wrapMapToProps.js?1817:63)
at mapToPropsProxy (wrapMapToProps.js?1817:54)
at handleFirstCall (selectorFactory.js?805c:37)
at pureFinalPropsSelector (selectorFactory.js?805c:85)
at Object.runComponentSelector [as run] (connectAdvanced.js?48b8:43)
at Connect.initSelector (connectAdvanced.js?48b8:195)
at new Connect (connectAdvanced.js?48b8:136)
at constructClassInstance (react-dom.development.js?61bb:11315)
(Snipped from my code which is the example 1 in documentation):
export default compose(
firestoreConnect(['todos']), // or { collection: 'todos' }
connect((state, props) => ({
todos: state.firestore.ordered.todos
}))
)(Todos)
I inspected the state variable and it does contain the firestore attribute. This attribute contains a number of functions, as expected, but it is missing the query results under "ordered", which is undefined.
I have tried all different ways to use firestoreconnect e.g. using a Class-based component, using a query with parameters, etc. and all give the same error.
My Firebase project is configured correct as I am able to create documents inside collections. A todos collection for testing purposes is present as well containing 2 documents.
I have come across this post, which mentions the following:
If you just upgraded to React-Redux v6, it's because react-redux-firebase is not compatible with v6.
See https://github.com/prescottprue/react-redux-firebase/issues/581 for details.
This does not apply to me because I am using react-redux version 5. Here are the versions I am using:
"firebase": "^5.10.1",
"react-redux": "^5.0.7",
"react-redux-firebase": "^2.2.6",
"redux": "^4.0.1",
"redux-firestore": "^0.7.3",
I have spent a significant amount of time on this. Like I said, using firestore to add new data to collections works fine. It is just this HoC business that is failing no matter how i approach the solution.
any help would be appreciated.
Never solved this. I guess it is related to incompatible versions. What I ended up doing is download v4 of react-boilerplate and set up v3 react-redux-firebase which uses the Context API as opposed to store enhancers. Now works very well.