I'm making a NextJs application with next-auth for the authentication part.
Email Sign In is successfully implemented using next-auth's own default pages.
But now I would like to have a custom sign in page. I followed the documentation for this, and added
pages: { signIn: '/auth/signin' } in my [...nextauth].js file. Then, I added the given Email Sign In code in pages/auth/signin.js.
But upon running yarn dev, I get this module not found error:
error - ./pages/api/auth/signin.js:1:0
Module not found: Package path ./react is not exported from package C:\...\node_modules\next-auth (see exports field in C:\...\node_modules\next-auth\package.json)
> 1 | import { getCsrfToken } from "next-auth/react"
2 |
3 | export default function SignIn({ csrfToken }) {
4 | return (
Import trace for requested module:
https://nextjs.org/docs/messages/module-not-found
And I couldn't find any module named 'next-auth/react' in npm or yarn websites.
Even in next-auth folder in node_modules, there is no 'react' named file...
How can I solve this? And am I doing anything wrong here?
I faced the same issue and realised the docs are for v4 where next-auth/react is used.
You are probably on v3 where next-auth/client is used instead.
To use the beta version, do:
➜ npm i next-auth#beta
You can now run npm install next-auth or yarn add next-auth. This will update the version of next-auth to version 4 in which you import SessionProvider as follows (within _app.tsx) :
import { SessionProvider } from "next-auth/react"
I think it should be imported from client and not react
try this : import { getCsrfToken } from "next-auth/client"
Also,
(just sharing an alternate solution), you need not define the custom pages in next auth. you can have your own login page and there just call next-auth's signin method, by passing the type like email or google.
and if email, then pass the email as well. eg:
const handleSubmit = (event) => {
event.preventDefault();
signIn("email", { email, callbackUrl: `${process.env.VERCEL_URL}/` });
};
I was facing this issue. I was using the "next-auth": "^4.18.7" version. my node version was 14.0.0. when I update this version to 18.12.1 then the issue is resolved.
Related
I installed an npm package, but since we can't use imports in nuxt 3, I don't get how to use it and couldn't find anything about this in the documentation. Does anyone know how to deal with this?
What kind of library you want to add to the project? Nuxt reads all files in your project and will import your imports inside of them. You need just pay attention, are library is made to be used in node.js or client browser. Exception to that are Nuxt modules you need to include in modules array inside nuxt.config files, but the intention of that is you won't need to import them in your project files for example.
Using the composable setup function, in the reality it is a simple async function that will run on a server and SSR HTML for client, so every thing you do directly there need to be safe to use in node.js.
Unless:
You will wrap component in <ClientOnly> component. Component won't be rendered on server.
You will use code in life cycle hook like onMounted(() => {...}).
You can paste it inside some function and not initiate it.
You will wrap code in your component in if(process.client) {...}.
Here is an example of plugin that runs on server and client.
import { defineNuxtPlugin } from '#app'
// Those imports are streight from node_modules installed
// using yarn add -D firebase or npm install -D firebase
// -D stands for devDependencies in package.json.
// You no need to install enything in "dependencies"
import { initializeApp, getApps } from '#firebase/app'
import { getAuth, onAuthStateChanged } from '#firebase/auth'
export default defineNuxtPlugin((nuxtApp) => {
const firebaseConfig = { ...useRuntimeConfig().public.firebaseConfig }
if (!getApps().length) initializeApp(firebaseConfig)
if(process.client) {
onAuthStateChanged(getAuth(), user => {
const currentUser = useState('user')
currentUser.value = user
})
}
}
Firebase is initialized on a server to be able to fetch data and SSR HTML files to a client. Then on client Firebase is initialized and it triggers onAuthStateChanges() function. This function initiate WebSocket connection with authentication system. It's in if(proces.client) so it won't trigger in node.js.
I’m having problems implement the zoom meetings sdk with vue 3 and vite. This is a boiler plate init of vue 3 project using the vue-create cli
I’ve also resisted my add with zoom and the my sdk key and sdk secret.
Following the steps in the zoom dev site I’ve installed the zoom meeting sdk with
npm install #zoomus/websdk --save
Following various example from the zoom dev site and zoom git I added this import to a the base HelloWord.vue component. This first error it get is
import { ZoomMtg } from "#zoomus/websdk";
Error
Uncaught TypeError: c2 is not a function
After seachinig for Similar problems I found a solution to this and change the import to this which gave no errors
import ZoomMtg from "#zoomus/websdk/dist/zoomus-websdk-embedded.umd.min.js";
The next bit of code I got from the zoom meet sdk vue 2 example
ZoomMtg.setZoomJSLib('https://source.zoom.us/2.8.0/lib', '/av');
However this produced another error
Uncaught TypeError: ZoomMtg.checkSystemRequirements is not a function
At this point I’m stuck.
I’m trying to create a zoom component that can be used on multiple pages however I can’t seem to get passed this early stage.
Help would be much appreciated.
As you wish you can create client view using embedded.
you can import ZoomMtgEmbedded from '#zoomus/websdk/embedded';
import ZoomMtgEmbedded from '#zoomus/websdk/embedded';
export default {
created () {
},
data () {
return {
client: ZoomMtgEmbedded.createClient(),
// This Sample App has been updated to use SDK App type credentials https://marketplace.zoom.us/docs/guides/build/sdk-app
sdkKey: "",
meetingNumber: "123456789",
passWord: "",
role: 0,
signatureEndpoint: "",
userEmail: "",
userName: "Vue.js",
// pass in the registrant's token if your meeting or webinar requires registration. More info here:
// Meetings: https://marketplace.zoom.us/docs/sdk/native-sdks/web/component-view/meetings#join-registered
// Webinars: https://marketplace.zoom.us/docs/sdk/native-sdks/web/component-view/webinars#join-registered
registrantToken: ''
}
}
}
here is full example updated recently.
If you would like to use component view, you should add lodash
script in index.html.
I having a problem with my Google Sign In, I'm Currently using EXPO app I wish at all cost not to eject / opt out of Expo, the problem is that when I click on the Button to log in with Google in my App it does take me to the login page for me inside the browser, but once I put my Google credentials, it just lands inside the Google.com page.
I checked a lot of posts but still I'm unable to get it to come back to the app.
My app Code to log in is:
//import de Google en Expo
import * as Google from 'expo-google-app-auth';
import * as AppAuth from 'expo-app-auth';
export const googleLogin = () => {
console.log('***Entro en Google***');
return async dispatch => {
try {
const result = await Google.logInAsync({
androidClientId: '***my ID Censored***',
scopes: ['profile', 'email'],
behavior: 'web',
redirectUrl: `${AppAuth.OAuthRedirect}:/oauthredirect`
});
console.log('***Hizo Consulta***');
if (result.type === 'success') {
console.log(result.accessToken);
} else {
return { cancelled: true };
}
} catch (e) {
return { error: true };
}
}
};
I checked on many posts that the issue was the redirect URL and I tried setting 4 options:
${AppAuth.OAuthRedirect}:/oauthredirect
${AppAuth.OAuthRedirect}:/oauthredirect/google
'host.exp.exponent:/oauth2redirect/google'
'host.exp.exponent:/oauth2redirect/'
None of them worked, I did the last 2 of host.exp.exponent as that is the Bundle Identifier used by Expo on their documentation:
https://docs.expo.io/versions/latest/sdk/google/
Create an Android OAuth Client ID
Select "Android Application" as the Application Type. Give it a name
if you want (maybe "Android Development").
Run openssl rand -base64
32 | openssl sha1 -c in your terminal, it will output a string that
looks like A1:B2:C3 but longer. Copy the output to your clipboard.
Paste the output from the previous step into the
"Signing-certificate fingerprint" text field.
Use host.exp.exponent as the "Package name".
4.Click "Create"
You will now see a modal with the Client ID.
The client ID is used in the androidClientId option for Google.loginAsync (see code example below).
I did just that, and now it always gets stuck in the google.com page, any Ideas or recommendations?
Kind Regards
What have you added to your bundle id (e.g "Apple bundle ID")?
Take into account that there is a difference between production and development.
In development, you should use the default expo apple bundle id so you will be allowed to use the google login (and you won't get redirect_fail).
The default apple bundle id for development using expo is: host.exp.exponent
In production, you should have your own bundle id.
Please write up a follow-up message if any extra help is needed.
In app.json,
package name as to be all in small letters like com.app.cloneapp
I'm trying to test my app using jest but encountered an error "You attempted to use a firebase module that's not installed on your Android project by calling firebase.app()". Below is my code
import firebase from '#react-native-firebase/app';
test('renders correctly', () => {
Platform.OS = 'android';
firebase.initializeApp({//credentials hidden
});
const _firestore = firebase.firestore();
const personStore = new PersonStore(_firestore);
const app = renderer
.create(
<Provider {...personStore}>
<PersonInfo />
</Provider>,
)
.getInstance();
});
What am I missing?
I've tried this solution https://rnfirebase.io/install-android but to no avail
And #react-native-firebase/app is working if I'm not in test mode
Try the getting started steps: Getting Started
The solution you tried is a secondary step.
Also firebase is segmented in modules, so you should install the required modules separated. if you are going to use the firestore you have to install the module.
Firestore Module
for me the problem was with mismatch in the package name of the app throughout the project (I started out with a MyApp project and then changed the name but not in all the necessary places).
I then followed these steps to rename everything and it started working
i tried to check other app install in my react native project, I'm used module like: https://www.npmjs.com/package/react-native-check-app-install
But always got this error:
Cannot read property 'pkgName' of undefined
Here is my code:
AppInstalledChecker
.isAppInstalledAndroid('com.skype.raider')
.then((isInstalled) => {
// isInstalled is true if the app is installed or false if not
console.log('App Skype status: ', isInstalled);
});
Anyone can suggest me one way so check app install in react native (both: iOS/android)
install this
https://github.com/KjellConnelly/react-native-shared-group-preferences
and
async check() {
try {
await SharedGroupPreferences.isAppInstalledAndroid("com.farsitel.bazaar")
// IF IS INSTALL
} catch (e) {
// IF IS NOT INSTALL
}
}
Google Play considers the list of installed apps to be personal and sensitive user data.
As we are using
AppInstalledChecker
.isAppInstalledAndroid()
method for checking app installed check, for that we have to white-list the queries in manifest.xml
Reference : https://developer.android.com/training/package-visibility
<queries>
<package android:name="com.instagram.android"/>
…
</queries>
For adding Queries need to upgrade build gradle version:
new default settings and features for package visibility in Android 11 that need to add you must update your android gradle plugin version
Reference: How to fix "unexpected element <queries> found in <manifest>" error?
I have updated from 3.5.2 to 4.0.2
Now react-native-check-app-install module working as expected
Hope this is resolved!
Android
I. For app's which has deep links like 'waze://', 'mapsme://' you can use:
import { Linking } from 'react-native'
...
Linking.canOpenURL('waze://ul?ll=${latitude},${longitude}&navigate=yes')
OR
II. You can use for absolutely all apps (for example with deep links like "https://...")
https://github.com/KjellConnelly/react-native-shared-group-preferences
iOS
import { Linking } from 'react-native'
...
Linking.canOpenURL(iOS_app_URL_Scheme)
...
where iOS_app_URL_Scheme you can find via Google for each separate app. Like "waze://", "comgooglemaps://", "osmandmaps://" etc