Remove email login
Is it possible to only rely on OAuth and disable email login when using OpenSaas? When I comment out the email method (with verification and reset), I get a build error.
Wasp 0.13.2 WSL2
18 Replies
Hi @Louis Deconinck. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Yes, it is possible to rely only on OAuth and disable email login in Wasp. However, you need to ensure that you have at least one authentication method enabled. If you comment out the email method, you should have another method like Google or GitHub OAuth enabled.
Here is an example of how you can set up Google OAuth:
In this example, the
google: {} line enables Google OAuth. You can replace google with any other OAuth provider supported by Wasp.
If you're still getting a build error after ensuring that you have at least one authentication method enabled, the error might be due to another part of your code. Please check the error message for more details.
For more information, you can refer to the Wasp documentation (https://wasp-lang.dev/docs/auth/social-auth/google#default-behaviour).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @Louis Deconinck, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:
Perhaps try again in 15mins?@kapa.ai This is how my wasp.main file looks like:
This is the error I'm getting:
Let me check the knowledge base for you. One moment! :books:
----------------------
The error message you're seeing indicates that the Wasp project failed to compile, but it doesn't provide specific details about what caused the failure. However, it's worth noting that the error message mentions several files related to email authentication, such as
VerifyEmailForm.jsx, LoginSignupForm.jsx, ForgotPasswordForm.jsx, and ResetPasswordForm.jsx.
Given that you're trying to disable email authentication and rely solely on Google OAuth, it's possible that these email-related files are causing issues. If you have any code in your project that's still trying to import or use these files, you might encounter errors.
Here's what you can do to troubleshoot this issue:
1. Check your project for any references to the mentioned files or email authentication in general. If you find any, try commenting them out or removing them.
2. Ensure that your getGoogleUserFields and getGoogleAuthConfig functions in @src/server/auth/setUsername.js are correctly implemented and exported. Any issues with these functions could potentially cause compilation errors.
3. Try running wasp clean to delete all .wasp and node_modules stuff and then wasp start to reinstall everything again. This can help if the issue is caused by some broken state in the .wasp folder.
If you're still encountering issues after trying these steps, I would recommend sharing more details about your project setup or reaching out to the Wasp community for further assistance.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @Louis Deconinck, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:
Perhaps try again in 15mins?@kapa.ai This is what came before:
Let me check the knowledge base for you. One moment! :books:
----------------------
The error messages you're seeing are TypeScript errors indicating that certain modules related to email authentication, such as
VerifyEmailForm, ResetPasswordForm, ForgotPasswordForm, GetVerificationEmailContentFn, and GetPasswordResetEmailContentFn, are not found in the 'wasp/client/auth' and 'wasp/server/auth' modules.
This is likely because you've disabled email authentication in your Wasp project, so these modules are no longer available.
To resolve these errors, you should remove or comment out any imports or usage of these modules in your project. The files where these modules are being imported are mentioned in the error messages:
- ext-src/client/auth/EmailVerification.tsx
- ext-src/client/auth/PasswordReset.tsx
- ext-src/client/auth/RequestPasswordReset.tsx
- ext-src/server/auth/email.ts
For example, if you have a line like this in your EmailVerification.tsx file:
You should comment it out or remove it:
Do the same for any other lines in your project that are importing or using the modules mentioned in the error messages.
After making these changes, try running your project again to see if the errors are resolved.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @Louis Deconinck, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:
Perhaps try again in 15mins?@kapa.ai I commented out the entirety of these pages:
ext-src/client/auth/EmailVerification.tsx
ext-src/client/auth/PasswordReset.tsx
ext-src/client/auth/RequestPasswordReset.tsx
ext-src/server/auth/email.ts
Compiling now works without erros, but my website remains blank. This is the source code of the homepage:
Let me check the knowledge base for you. One moment! :books:
----------------------
The source code of your homepage seems to be correct and it should render the React application in the
div with the id root. However, if you're seeing a blank page, it's likely that there's an issue with your React application itself.
Here are a few things you can check:
1. Open your browser's developer tools and check the console for any error messages. These messages can provide clues about what's going wrong.
2. Check the network tab in your browser's developer tools to see if all resources are being loaded correctly. Look for any failed requests.
3. Ensure that your src/index.tsx file is correctly setting up and rendering your React application. This is the entry point of your application and it should render a component into the div with the id root.
4. Since you've commented out the entirety of the pages related to email authentication, make sure that there are no remaining references to these pages in your application. If there are any components that are still trying to render these pages, it could cause your application to fail.
If you're still encountering issues after trying these steps, I would recommend sharing more details about your React application or reaching out to the Wasp community for further assistance.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @Louis Deconinck, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:
Perhaps try again in 15mins?@kapa.ai This is the console log:
Let me check the knowledge base for you. One moment! :books:
----------------------
The error message
Uncaught SyntaxError: The requested module '/@fs/home/louis/projects/skoolanalytics_opensaas/skool-analytics/app/src/client/auth/EmailVerification.tsx?t=1714720523733' does not provide an export named 'EmailVerification' (at router.tsx:12:10) indicates that the EmailVerification component is being imported from EmailVerification.tsx in router.tsx, but it's not found because you've commented out the entire EmailVerification.tsx file.
To resolve this issue, you should remove or comment out the import statement in router.tsx that's trying to import EmailVerification. The file and line where this import statement is located are mentioned in the error message: router.tsx:12.
For example, if you have a line like this in your router.tsx file:
You should comment it out or remove it:
Do the same for any other lines in your project that are importing or using the EmailVerification component.
After making these changes, try running your project again to see if the errors are resolved.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @Louis Deconinck, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:
Perhaps try again in 15mins?@kapa.ai I'm using OpenSaas. Where in my project folder can I find the router.tsx file?
Let me check the knowledge base for you. One moment! :books:
----------------------
In the OpenSaaS project, the
router.tsx file is generated by Wasp and is located in the .wasp/out directory. However, this directory is generated during the build process and is not meant to be manually edited.
If you want to modify routes, you should do so in the main.wasp file or in the ext-src directory, which is where you can put your custom code that extends the basic Wasp app.
For example, in main.wasp, you can define pages and routes like this:
And in ext-src, you can define your custom React components.
Remember, any changes you make in the .wasp/out directory will be overwritten the next time you build your project. Always make changes in the main.wasp file or the ext-src directory.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @Louis Deconinck, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:
Perhaps try again in 15mins?@kapa.ai So I commented out these routes: RequestPasswordResetRoute, PasswordResetRoute & EmailVerificationRoute.
Now there are no errors when compiling and my website shows up. However I still get quite some console log errors. Are these normal?
Let me check the knowledge base for you. One moment! :books:
----------------------
The console log errors you're seeing are not uncommon during development and they provide useful information for debugging your application.
1.
Uncaught SyntaxError: Unexpected end of input and Failed to load resource: net::ERR_BLOCKED_BY_CLIENT: These errors are likely related to the script.js and script.local.js files. It seems like these files might be blocked by your browser or they might not be found. You should check if these files exist and are correctly linked in your HTML.
2. Warning: Each child in a list should have a unique "key" prop.: This is a common warning in React when you're rendering a list of elements. Each child in the list should have a unique 'key' prop. You can usually fix this by ensuring that each element in your list has a unique key prop. For example:
3. Warning: Invalid DOM property fill-rule. Did you mean fillRule?: This warning is telling you that you're using a DOM property fill-rule that should be written in camelCase as fillRule in JSX. You should replace any instances of fill-rule in your JSX with fillRule.
Remember, while warnings might not prevent your application from running, they often indicate potential issues with your code and it's a good practice to resolve them.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @Louis Deconinck, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:
Perhaps try again in 15mins?@Wasp Team I'm using OpenSaas and would like to use only Google OAuth. What is the best way to go about that?
Here's what I did:
- Removed Email auth in wasp.main
- Removed Email pages under src/client/auth
- Removed Email routes from wasp.main
Is this the recommended way to go about this? After doing that, my app compiles correctly and seems to function correctly (including login and logout). I do get some console log warnings (see message above), but not sure if those are related or something to worry about?
Wohooo @Louis Deconinck, you just became a Waspeteer level 2!
You did the correct thing š warnings are okay, you can ignore those. But you have share them here if you'd like
@miho Are you sure it's ok. These look like errors to me, not warnings
@Louis Deconinck Can you screenshot the console, and we'll tell you whether it's anything to worry abuot (those errors above might be caused by a transient state of the app)
@sodic the warnings I saw refering to were from the last message
I do get some console log warnings (see message above)