Wasp•7mo ago

Does OpenSaaS provide email authentication webpage teamplate as html/jsx/css file?

Does OpenSaaS provide email authentication webpage as html/jsx/css file?

1 Reply

Hi @skyblade2954. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, OpenSaaS does provide a template for setting up email authentication. The template is provided as JSX files which you can use in your React application. The template includes various components such as Login, Signup, Email Verification, Request Password Reset, and Password Reset. Here is an example of how you can use these components in your application:

import {  
 LoginForm,  
 SignupForm,  
 VerifyEmailForm,  
 ForgotPasswordForm,  
 ResetPasswordForm,  
} from 'wasp/client/auth'  
import { Link } from 'react-router-dom'  
  
export function Login() {  
 return (  
 <Layout>  
 <LoginForm />  
 <br />  
 <span className="text-sm font-medium text-gray-900">  
 Don't have an account yet? <Link to="/signup">go to signup</Link>.  
 </span>  
 <br />  
 <span className="text-sm font-medium text-gray-900">  
 Forgot your password? <Link to="/request-password-reset">reset it</Link>  
 .  
 </span>  
 </Layout>  
 );  
}  
...

import {  
 LoginForm,  
 SignupForm,  
 VerifyEmailForm,  
 ForgotPasswordForm,  
 ResetPasswordForm,  
} from 'wasp/client/auth'  
import { Link } from 'react-router-dom'  
  
export function Login() {  
 return (  
 <Layout>  
 <LoginForm />  
 <br />  
 <span className="text-sm font-medium text-gray-900">  
 Don't have an account yet? <Link to="/signup">go to signup</Link>.  
 </span>  
 <br />  
 <span className="text-sm font-medium text-gray-900">  
 Forgot your password? <Link to="/request-password-reset">reset it</Link>  
 .  
 </span>  
 </Layout>  
 );  
}  
...

You can find more details about setting up email authentication in the Wasp documentation (https://wasp-lang.dev/docs/auth/email#4-create-the-client-pages). As for the styling, the template uses Tailwind CSS. You can read more about how to add it here (https://wasp-lang.dev/docs/project/css-frameworks). Please note that you will need to define the routes and pages for these components in your main.wasp file. You can find more details about this in the Wasp documentation (https://wasp-lang.dev/docs/auth/email#3-add-the-routes-and-pages). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @skyblade2954, 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?

Gaming

Programming

Does OpenSaaS provide email authentication webpage teamplate as html/jsx/css file?