Wasp•2mo ago

Custom Sign In

I want to create a custom sign in, is that possible?

4 Replies

Hi @NightOwl. 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 create a custom sign-in (login) process in Wasp. There are a couple of ways you can approach this: 1. Use Wasp's built-in login function with custom UI: You can create your own custom UI components and use Wasp's login function to handle the authentication. Here's a basic example:

   import { login } from 'wasp/client/auth'
   
   export function LoginPage() {
     const [username, setUsername] = useState('')
     const [password, setPassword] = useState('')
   
     async function handleSubmit(event) {
       event.preventDefault()
       try {
         await login(username, password)
         // Handle successful login (e.g., redirect)
       } catch (error) {
         // Handle login error
       }
     }
   
     return (
       <form onSubmit={handleSubmit}>
         {/* Your custom login form UI */}
       </form>
     )
   }

   import { login } from 'wasp/client/auth'
   
   export function LoginPage() {
     const [username, setUsername] = useState('')
     const [password, setPassword] = useState('')
   
     async function handleSubmit(event) {
       event.preventDefault()
       try {
         await login(username, password)
         // Handle successful login (e.g., redirect)
       } catch (error) {
         // Handle login error
       }
     }
   
     return (
       <form onSubmit={handleSubmit}>
         {/* Your custom login form UI */}
       </form>
     )
   }

Auth Username & Password Docs (https://wasp-lang.dev/docs/auth/username-and-pass#login) 2. Create a custom login action: If you need more control over the login process, you can create a custom login action. This involves implementing your own login logic using Wasp's lower-level authentication APIs. Auth Username & Password Docs (https://wasp-lang.dev/docs/auth/username-and-pass#customizing-the-auth-flow) 3. Customize Wasp's Auth UI: If you're using Wasp's Auth UI components, you can customize their appearance and behavior to some extent. For example, you can modify colors, add a logo, or include additional fields. Auth UI Customization Docs (https://wasp-lang.dev/docs/auth/ui#lets-put-everything-together-) Remember that creating a custom authentication flow can be complex and potentially introduce security vulnerabilities if not implemented correctly. It's recommended to use Wasp's built-in authentication features unless you have a specific need for customization. If you need more detailed information or have specific requirements for your custom sign-in process, please let me know, and I can provide more targeted guidance. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @NightOwl, 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?

NightOwlOP•2mo ago

is there a way to login the user on serverside? @kapa.ai

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: Sorry @NightOwl, 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?

miho•2mo ago

Sharing this gist since it contains useful pieces of code related to creating custom auth on the backend: https://gist.github.com/infomiho/3c63de7d53aba59d6293bcb59501a029

Gist

Implementing custom OAuth provider with Wasp 0.14.1+ (Spotify in th...

Implementing custom OAuth provider with Wasp 0.14.1+ (Spotify in this case) - .env.server

Gaming

Programming

Custom Sign In

Did you find this page helpful?