I'm trying to do a signup on my app but I'm getting error like:
"POST https://identitytoolkit.googleapis.com/v1/accounts:signUp?key=AIzaSyCO3QWLiPMJyrZqZLi66vsRsvVVgcGvyQg 400"
I'm using Vue JS and Firebase 9. My code in Signup.vue is:
import { initializeApp, db } from "#/firebase.js";
import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";
import { doc, setDoc } from "firebase/firestore";
const auth = getAuth();
export default {
name: "signup",
data() {
return {
firstName: "",
lastName: "",
username: "",
password: "",
country: "",
city: "",
zipCode: "",
};
},
methods: {
signupClick() {
createUserWithEmailAndPassword(auth, this.username, this.password)
.then((userCredential) => {
// Signed in
const userProfileData = {
username: this.username,
firstName: this.firstName,
lastName: this.lastName,
country: this.country,
city: this.city,
zipcode: this.zipCode,
};
this.$router.push({ name: "dashboard" });
console.log("Uspjesna reg");
const user = userCredential.user;
const userProfile = setDoc(doc(db, "users", userCredential.user.uid), userProfileData);
})
.catch((error) => {
const errorCode = error.code;
const errorMessage = error.message;
});
},
},
};
The issue is that you are using a weak password. Try confirming this by going to the Network section in the developer tools and click the error name
Related
I deployed a Nextjs(v13) app with AWS Amplify and using NextAuth(v4.17.0). I'm using CredentialsProvider with a custom server. All works great in development environment, but in production the session callback doesn't fire and the session is empty, even if the token gets created in the database
/page/api/auth/[...nextauth].tsx disregard the console logs lol
import NextAuth from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";
import jwt_decode from "jwt-decode";
import { TokenInfo } from "../../../components/types/auth_types";
async function refreshAccessToken(token) {
try {
console.log("BUT WHY?");
const res = await fetch(
`${process.env.NEXT_PUBLIC_API_URL}/api/token/refresh/`,
{
method: "POST",
body: JSON.stringify({refresh: token.refreshToken}),
headers: {"Content-Type": "application/json"},
}
);
if (!res.ok) throw "refreshError";
const responseJson = await res.json();
return {
...token,
accessToken: responseJson.access,
}
} catch(error) {
return {
...token,
error: "RefreshAccessTokenError",
}
}
}
export const authOptions = {
providers: [
CredentialsProvider({
id: "credentials",
name: "Credentials",
credentials: {
email: { label: "Username", type: "text", placeholder: "" },
password: { label: "Password", type: "password" }
},
async authorize(credentials, req) {
const userCredentials = {
email: credentials.email, password: credentials.password
};
try {
const res = await fetch(
`${process.env.NEXT_PUBLIC_API_URL}/api/token/`,
{
method: "POST",
body: JSON.stringify(userCredentials),
headers: {"Content-Type": "application/json"},
credentials: "include",
}
);
console.log("res", res);
if (res.ok) {
const responseJson = await res.json();
console.log("resJson", responseJson);
const tokenInfo: TokenInfo = jwt_decode(responseJson.access);
console.log("tokenInfo", tokenInfo);
return {
id: tokenInfo.user_id.toString(),
email: tokenInfo.email,
firstName: tokenInfo.first_name,
lastName: tokenInfo.last_name,
isStaff: tokenInfo.is_staff,
accessToken: responseJson.access,
refreshToken: responseJson.refresh,
};
}
return null;
} catch(e) {
return null;
}
}
})
],
callbacks: {
async jwt({ token, account, user }) {
if (account && user) {
console.log("got into token", user);
token.firstName = user.firstName;
token.lastName = user.lastName;
token.refreshToken = user.refreshToken;
token.accessToken = user.accessToken;
}
if (token.accessToken) {
console.log("got in this if instead")
const decodedToken: TokenInfo = jwt_decode(token.accessToken);
if (Date.now() < decodedToken.exp * 1000) {
console.log("got here, returned properly");
return token;
}
}
console.log("got here, not properly, why?");
return await refreshAccessToken(token);
},
async session({ session, token }) {
console.log("getting session");
session.user.firstName = token.firstName;
session.user.lastName = token.lastName;
session.accessToken = token.accessToken;
console.log("sess", session);
return session;
}
},
secret: process.env.NEXT_AUTH_SECRET,
session: {
maxAge: 2 * 24 * 60 * 60, // two days
}
};
export default NextAuth(authOptions);
I have searched as best as I could and couldn't find anything that I didn't do already.
My understanding is I don't need to set session: { strategy: "jwt"} since that's the default.
I have NEXT_AUTH_SECRET="mysecret", NEXT_PUBLIC_API_URL="https://www.backend_domain.com" and NEXTAUTH_URL="https://www.frontend_domain.com" set properly in .env.production and the API calls succeed, as well as the NextAuth calls return 200 status code, no errors in Amplify logs
Edit 1:
If I navigate to /api/auth/signin/credentials and use the default UI for login, the session gets created successfully
I'm designing an application with Next.js and using NextAuth for authentication(using Google OAuth). In order to use other Google APIs once authenticated, I want to persist the accessToken. The accessToken gets set in the session() callback. However, it seems like the callback never runs. Could someone help me out with this? Thanks!
Here's my [...nextauth].js file
import GoogleProvider from "next-auth/providers/google"
import NextAuth from "next-auth/next"
export default NextAuth(
{
// Configure one or more authentication providers
providers: [
GoogleProvider({
clientId: PROCESS.ENV.GOOGLE_CLIENT_ID',
clientSecret: PROCESS.ENV.GOOGLE_CLIENT_SECRET,
authorization: {
params: {
prompt: "consent",
access_type: "offline",
response_type: "code",
scope: 'openid email profile https://www.googleapis.com/auth/calendar'
},
},
callbacks: {
async session({ session, token, user }) {
session.user.id = token.id;
session.accessToken = token.accessToken;
// Not printed
console.log('In here');
return session;
},
async jwt({ token, user, account, profile, isNewUser }) {
console.log(token);
if (user) {
token.id = user.id;
}
if (account) {
token.accessToken = account?.access_token;
}
return token;
},
},
}),
// ...add more providers here
],
sercet: PROCESS.ENV.JWT_SECRET,
session: {
strategy: "jwt",
},
}
)
Here's my login component:
import React, { useState } from 'react';
import {useSession, signIn, signOut} from 'next-auth/react';
import axios from 'axios';
const Login = () => {
const x = useSession();
const {data: session} = x
const [calendar, setCalendar] = useState({});
const getCalendarData = async () => {
console.log(session.accessToken);
console.log(x);
const options = {
method: 'GET',
headers: {
Authorization: `Bearer ${session.accessToken}`,
}
};
const url = "https://www.googleapis.com/calendar/v3/calendars/primary";
const data = null
try{
data = await axios.get(url, options);
setCalendar(data);
} catch(error){
console.log(error);
}
}
if(session){
return (
<div>
<div> Welcome, {JSON.stringify(session.user)} </div>
<div>{JSON.stringify(calendar)}</div>
<div><button onClick={() => signOut()}>Sign Out</button></div>
<div><button onClick={async () => await getCalendarData()}>Get Calendar Data</button></div>
</div>
);
}
else{
return(
<div>
<div> You are not signed in </div>
<div><button onClick={() =>signIn()}> Sign in</button></div>
</div>
)
}
}
I have a simple function that register users in firebase and save data in cloud firestore
But I am getting this error:
[TypeError: Cannot call a class as a function]
Can anyone help my find where is located the error?
function below:
const handleSignUp = useCallback(
async data => {
try {
setLoading(true);
const auth = await authFB().createUserWithEmailAndPassword(
data.email,
data.password,
);
const db = firestore();
const firstName = data.name.split(' ').slice(0, -1).join(' ');
const lastName = data.name.split(' ').slice(-1).join(' ');
await db
.collection('Providers')
.doc(auth.user.uid)
.set({
id: auth.user.uid,
name: {
first: firstName,
last: lastName,
},
email: data.email,
createdAt: firestore.Timestamp.fromDate(new Date()),
address: {
position: firestore.GeoPoint(
coordinates.latitude,
coordinates.longitude,
),
},
})
.then(() => {
navigation.reset({
routes: [{ name: 'SignIn' }],
index: 0,
});
});
setLoading(false);
Alert.alert(
'Cadastro realizado com sucesso!',
'Você já pode fazer login na aplicação.',
);
} catch (err) {
setLoading(false);
}
},
[coordinates],
);
I'm not terribly familiar with the Firestore API, but most likely you just need the new keyword where you're creating a GeoPoint:
position: new firestore.GeoPoint(
coordinates.latitude,
coordinates.longitude,
),
Code.js
saveToFirebase = () => {
let statusMsg = ""
firebase
.firestore()
.collection("messages")
.doc(this.state.field.email)
.set(this.state.field)
.then((statusMsg = "Your Message have been submitted successfully."))
this.clearFields(statusMsg)
}
Code.test.js
it("should call mock firebase module", () => {
const docData = {
field: {
name: "Rob Bob",
email: "rob#bob.com",
phone: "9999999999",
subject: "Test subject",
message: "Test message",
},
}
const docResult = {
data: () => docData,
}
const get = jest.fn(() => Promise.resolve(docResult))
const set = jest.fn()
const doc = jest.fn(() => {
return {
set,
get,
}
})
const colllection = jest.fn((messages) => {
return { doc }
})
const firestore = () => {
return colllection
}
firebase.firestore = firestore
const mockData = { fake: "data" }
jest.clearAllMocks()
wrapper.instance().saveToFirebase()
})
While running the Code.test.js, it throws an error that firebase.firestore().collection() is not a function. Please suggest proper mocking of the firebase module for the above code and to add a case to check if firebase has successfully returned then, clearFields() is invoked.
You can use jest.spyOn(object, methodName) to mock firebase.firestore() function.
E.g.
index.jsx:
import React, { Component } from 'react';
import firebase from 'firebase';
export default class MyComponent extends Component {
constructor(props) {
super(props);
this.state = {
field: { email: 'mock#example.com' },
};
}
clearFields(statusMsg) {
console.log(statusMsg);
}
saveToFirebase = () => {
let statusMsg = '';
return firebase
.firestore()
.collection('messages')
.doc(this.state.field.email)
.set(this.state.field)
.then(() => {
statusMsg = 'Your Message have been submitted successfully.';
this.clearFields(statusMsg);
});
};
render() {
return <div>my component</div>;
}
}
index.test.jsx:
import MyComponent from '.';
import { shallow } from 'enzyme';
import React from 'react';
import firebase from 'firebase';
describe('61358076', () => {
afterEach(() => {
jest.restoreAllMocks();
});
it('should pass', async () => {
const firestoreMock = {
collection: jest.fn().mockReturnThis(),
doc: jest.fn().mockReturnThis(),
set: jest.fn().mockResolvedValueOnce(),
};
const clearFieldsSpy = jest.spyOn(MyComponent.prototype, 'clearFields');
jest.spyOn(firebase, 'firestore').mockImplementationOnce(() => firestoreMock);
const wrapper = shallow(<MyComponent></MyComponent>);
await wrapper.instance().saveToFirebase();
expect(firestoreMock.collection).toBeCalledWith('messages');
expect(firestoreMock.doc).toBeCalledWith('mock#example.com');
expect(firestoreMock.set).toBeCalledWith({ email: 'mock#example.com' });
expect(clearFieldsSpy).toBeCalledWith('Your Message have been submitted successfully.');
});
});
unit test results with 100% coverage:
PASS stackoverflow/61358076/index.test.jsx (17.824s)
61358076
✓ should pass (39ms)
console.log stackoverflow/61358076/index.jsx:1611
Your Message have been submitted successfully.
-----------|---------|----------|---------|---------|-------------------
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
-----------|---------|----------|---------|---------|-------------------
All files | 100 | 100 | 100 | 100 |
index.jsx | 100 | 100 | 100 | 100 |
-----------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 19.945s
source code: https://github.com/mrdulin/react-apollo-graphql-starter-kit/tree/master/stackoverflow/61358076
Hi recently I needed to mock jest module and this is my implementation,
note: I used eventEmitter3 to handle onAuthStateChange
import EventEmitter from 'eventemitter3';
const authEmitter = new EventEmitter();
let isSignIn = true;
const user = {
displayName: 'test name',
email: 'redirectTest#test.com',
emailVerified: true,
uid: 'id123',
providerData: [
{
email: 'redirectTest#test.com',
displayName: 'redirectResultTestDisplayName',
providerId: 'google',
},
],
};
const mockFirebase: any = {
initializeApp: jest.fn().mockReturnValue({
auth: jest.fn().mockReturnValue({
currentUser: isSignIn
? {
displayName: 'redirectResultTestDisplayName',
email: 'redirectTest#test.com',
emailVerified: true,
uid: 'id123',
providerData: [
{
email: 'redirectTest#test.com',
displayName: 'redirectResultTestDisplayName',
providerId: 'google',
},
],
sendEmailVerification: jest.fn(),
}
: null,
signInWithRedirect: jest.fn(),
getRedirectResult: jest.fn().mockReturnValue({
credential: {
providerId: 'Google',
},
user: {
getIdToken: jest.fn().mockResolvedValue('abc1234'),
},
additionalUserInfo: {
profile: {
email: '__tests__#__tests__.com',
name: 'John Doe',
},
},
}),
onAuthStateChanged: jest.fn(fn => {
// sign user on start
fn(user);
// sign-out user on start
authEmitter.on('sign-out', fn, undefined);
authEmitter.on('sign-in', fn, user);
}),
signOut: jest.fn(() => {
isSignIn = false;
authEmitter.emit('sign-out');
}),
signInWithEmailAndPassword: jest.fn(() => {
isSignIn = true;
authEmitter.emit('sign-in', user);
return Promise.resolve(true);
}),
sendPasswordResetEmail: jest.fn(() => Promise.resolve(true)),
sendEmailVerification: jest.fn(() => Promise.resolve(true)),
signInWithPopup: jest.fn(() => {
isSignIn = true;
authEmitter.emit('sign-in', user);
return Promise.resolve(true);
}),
}),
firestore: jest.fn().mockReturnValue({
collection: jest.fn().mockReturnValue({
doc: jest.fn().mockReturnValue({
add: jest.fn().mockResolvedValue({
id: 'abc123',
}),
set: jest.fn().mockResolvedValue({
uid: 'abc123',
}),
}),
}),
}),
}),
auth: {
GoogleAuthProvider: class {
addScope = jest.fn();
},
GithubAuthProvider: class {
addScope = jest.fn();
},
FacebookAuthProvider: class {
addScope = jest.fn();
},
},
};
jest.mock('firebase/app', () => mockFirebase);
I started to write tests for my application. I'm trying to create test for redux async creators.
The problem is when I run test I get following error :
Fetch all users › dispatch action loadUsersSuccess
Actions may not have an undefined "type" property. Have you misspelled a constant? Action: undefined
All actions have defined type constant so I dont understand what should be the problem.
const LOAD_ALL_USERS_SUCCESS = "src/containers/User/LOAD_ALL_USERS_SUCCESS";
const LOAD_ALL_USERS_FAILURE = "src/containers/User/LOAD_ALL_USERS_FAILURE";
//action creators
export function loadUsersSuccess(users) {
return {
type: LOAD_ALL_USERS_SUCCESS,
payload: users
};
}
export function loadUsersFailure(error) {
return {
type: LOAD_ALL_USERS_FAILURE,
payload: error
};
}
import nock from "nock";
import { loadUsersSuccess, loadUsersFailure } from "./ducks";
import configureStore from "redux-mock-store";
const middlewares = [];
const mockStore = configureStore(middlewares);
const LOAD_ALL_USERS_SUCCESS = "src/containers/User/LOAD_ALL_USERS_SUCCESS";
const LOAD_ALL_USERS_FAILURE = "src/containers/User/LOAD_ALL_USERS_FAILURE";
const users = [
{
first_name: "Emlynne",
last_name: "Spellacy",
email: "espellacy0#lycos.com",
gender: "Female",
age: 1965,
country: "Indonesia"
},
{
first_name: "Alie",
last_name: "Dalrymple",
email: "adalrymple1#telegraph.co.uk",
gender: "Female",
age: 1976,
country: "Pakistan"
}
];
function fetchData() {
return async (dispatch) => {
try {
const { data } = await axios.get("/users");
dispatch(loadUsersSuccess(data));
} catch (error) {
dispatch(loadUsersFailure(error));
}
};
}
describe("Fetch all users", () => {
afterEach(() => {
nock.cleanAll()
})
test("Should load all Users", () => {
nock("http://localhost:8000")
.get("api/users")
.reply(200, users);
const expectedAction = [
{
type: LOAD_ALL_USERS_SUCCESS,
payload: users
},
{
type: LOAD_ALL_USERS_FAILURE,
payload: "error"
}
];
const store = mockStore({});
return store.dispatch(fetchData()).then(() => {
expect(store.getActions()).toEqual(expectedAction);
});
});
});
The problem was that dispatch function didn't exist. So, I needed to add following lines.
import thunk from "redux-thunk";
const middlewares = [thunk];