-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #27 from auth0/feature/release-2
Feature/release 2
- Loading branch information
Showing
122 changed files
with
5,068 additions
and
792 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
|
|
||
| ## [[email protected]](https://github.com/auth0/auth0-react/tree/v0.1.0) (2024-02-06) | ||
|
|
||
| **Added** | ||
|
|
||
| Support for the following screens: | ||
|
|
||
| 1. [login](https://auth0.github.io/universal-login/classes/Classes.Login.html) | ||
| 2. [signup](https://auth0.github.io/universal-login/classes/Classes.Signup.html) | ||
| 3. [reset-password-email](https://auth0.github.io/universal-login/classes/Classes.ResetPasswordEmail.html) | ||
| 4. [reset-password-request](https://auth0.github.io/universal-login/classes/Classes.ResetPasswordRequest.html) | ||
| 5. [reset-password](https://auth0.github.io/universal-login/classes/Classes.ResetPassword.html) | ||
| 6. [reset-password-error](https://auth0.github.io/universal-login/classes/Classes.ResetPasswordError.html) | ||
| 7. [reset-password-success](https://auth0.github.io/universal-login/classes/Classes.ResetPasswordSuccess.html) | ||
|
|
||
| **Breaking Changes** | ||
|
|
||
| - **Flattened Screen-Related Properties**: We have simplified the structure of screen-related properties by removing the methods and replacing them with direct properties. | ||
|
|
||
| Example: | ||
| - The previous `loginIdInstance.transaction.geErrors` method has been replaced with the new `loginIdInstance.transaction.errors` property. | ||
|
|
||
| **Code Example:** | ||
| ```javascript | ||
| import LoginId from "@auth0/auth0-acul-js/login-id"; | ||
| const loginIdManager = new LoginId(); | ||
| // Old method | ||
| loginIdInstance.transaction.geErrors(); | ||
| // New property | ||
| loginIdInstance.transaction.errors; | ||
|
|
||
| ## [auth0-acul-js@0.0.1-beta.1](https://github.com/auth0/auth0-react/tree/v0.1.0) (2024-12-09) | ||
|
|
||
| **Added** | ||
|
|
||
| Support for the following screens: | ||
|
|
||
| 1. [login-id](https://auth0.github.io/universal-login/classes/Classes.LoginId.html) | ||
| 2. [login-Password](https://auth0.github.io/universal-login/classes/Classes.LoginPassword.html) | ||
| 3. [signup-id](https://auth0.github.io/universal-login/classes/Classes.SignupId.html) | ||
| 4. [signup-password](https://auth0.github.io/universal-login/classes/Classes.SignupPassword.html) | ||
| 5. [login-passwordless-email-code](https://auth0.github.io/universal-login/classes/Classes.LoginPasswordlessEmailCode.html) | ||
| 6. [login-passwordless-sms-otp](https://auth0.github.io/universal-login/classes/Classes.LoginPasswordlessSmsOtp.html) | ||
| 7. [passkey-enrollment](https://auth0.github.io/universal-login/classes/Classes.PasskeyEnrollment.html) | ||
| 8. [passkey-enrollment-local](https://auth0.github.io/universal-login/classes/Classes.PasskeyEnrollmentLocal.html) | ||
| 9. [phone-identifier-enrollment](https://auth0.github.io/universal-login/classes/Classes.PhoneIdentifierEnrollment.html) | ||
| 10. [phone-identifier-challenge](https://auth0.github.io/universal-login/classes/Classes.PhoneIdentifierChallenge.html) | ||
| 11. [email-identifier-challenge](https://auth0.github.io/universal-login/classes/Classes.EmailIdentifierChallenge.html) | ||
| 12. [interstitial-captcha](https://auth0.github.io/universal-login/classes/Classes.InterstitialCaptcha.html) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,174 @@ | ||
| # Login Screen Examples | ||
|
|
||
| ## Basic Login with Username/Password | ||
|
|
||
| ```typescript | ||
| import Login from '@auth0/auth0-acul-js/login'; | ||
|
|
||
| const loginManager = new Login(); | ||
|
|
||
| // Handle form submission | ||
| const handleSubmit = async (e: React.FormEvent) => { | ||
| e.preventDefault(); | ||
|
|
||
| try { | ||
| await loginManager.login({ | ||
| username: '[email protected]', | ||
| password: 'myPassword123' | ||
| }); | ||
| } catch (error) { | ||
| console.error('Login failed:', error); | ||
| } | ||
| }; | ||
| ``` | ||
|
|
||
| ## Login with Social Provider | ||
|
|
||
| ```typescript | ||
| import Login from '@auth0/auth0-acul-js/login'; | ||
|
|
||
| const loginManager = new Login(); | ||
|
|
||
| // Handle social login | ||
| const handleSocialLogin = async (connection: string) => { | ||
| try { | ||
| await loginManager.socialLogin({ | ||
| connection: connection // e.g. 'google-oauth2' | ||
| }); | ||
| } catch (error) { | ||
| console.error('Social login failed:', error); | ||
| } | ||
| }; | ||
| ``` | ||
|
|
||
| ## React Component Example with TailwindCSS | ||
|
|
||
| ```tsx | ||
| import React, { useState } from 'react'; | ||
| import Login from '@auth0/auth0-acul-js/login'; | ||
|
|
||
| const LoginScreen: React.FC = () => { | ||
| const [username, setUsername] = useState(''); | ||
| const [password, setPassword] = useState(''); | ||
| const [error, setError] = useState(''); | ||
|
|
||
| const loginManager = new Login(); | ||
| const { transaction } = loginManager; | ||
|
|
||
| const handleSubmit = async (e: React.FormEvent) => { | ||
| e.preventDefault(); | ||
| setError(''); | ||
|
|
||
| try { | ||
| await loginManager.login({ | ||
| username, | ||
| password | ||
| }); | ||
| } catch (error) { | ||
| setError('Login failed. Please check your credentials.'); | ||
| } | ||
| }; | ||
|
|
||
| const handleSocialLogin = async (connection: string) => { | ||
| try { | ||
| await loginManager.socialLogin({ connection }); | ||
| } catch (error) { | ||
| setError('Social login failed. Please try again.'); | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <div className="min-h-screen bg-gray-100 flex flex-col justify-center py-12 sm:px-6 lg:px-8"> | ||
| <div className="sm:mx-auto sm:w-full sm:max-w-md"> | ||
| <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900"> | ||
| Sign in to your account | ||
| </h2> | ||
| </div> | ||
|
|
||
| <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md"> | ||
| <div className="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10"> | ||
| <form className="space-y-6" onSubmit={handleSubmit}> | ||
| <div> | ||
| <label htmlFor="username" className="block text-sm font-medium text-gray-700"> | ||
| Username or Email | ||
| </label> | ||
| <div className="mt-1"> | ||
| <input | ||
| id="username" | ||
| name="username" | ||
| type="text" | ||
| required | ||
| value={username} | ||
| onChange={(e) => setUsername(e.target.value)} | ||
| className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500" | ||
| /> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div> | ||
| <label htmlFor="password" className="block text-sm font-medium text-gray-700"> | ||
| Password | ||
| </label> | ||
| <div className="mt-1"> | ||
| <input | ||
| id="password" | ||
| name="password" | ||
| type="password" | ||
| required | ||
| value={password} | ||
| onChange={(e) => setPassword(e.target.value)} | ||
| className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500" | ||
| /> | ||
| </div> | ||
| </div> | ||
|
|
||
| {error && ( | ||
| <div className="text-red-600 text-sm"> | ||
| {error} | ||
| </div> | ||
| )} | ||
|
|
||
| <div> | ||
| <button | ||
| type="submit" | ||
| className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" | ||
| > | ||
| Sign in | ||
| </button> | ||
| </div> | ||
| </form> | ||
|
|
||
| {transaction.alternateConnections && transaction.alternateConnections.length > 0 && ( | ||
| <div className="mt-6"> | ||
| <div className="relative"> | ||
| <div className="absolute inset-0 flex items-center"> | ||
| <div className="w-full border-t border-gray-300" /> | ||
| </div> | ||
| <div className="relative flex justify-center text-sm"> | ||
| <span className="px-2 bg-white text-gray-500"> | ||
| Or continue with | ||
| </span> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div className="mt-6 grid grid-cols-3 gap-3"> | ||
| {transaction.alternateConnections.map((connection) => ( | ||
| <button | ||
| key={connection.name} | ||
| onClick={() => handleSocialLogin(connection.name)} | ||
| className="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-500 hover:bg-gray-50" | ||
| > | ||
| {connection.name} | ||
| </button> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| )} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default LoginScreen; | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| import ResetPasswordEmail from '@auth0/auth0-acul-js/reset-password-email'; | ||
|
|
||
| const resetPasswordEmail = new ResetPasswordEmail(); | ||
|
|
||
| resetPasswordEmail.resendEmail(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| import ResetPasswordError from '@auth0/auth0-acul-js/reset-password-error'; | ||
|
|
||
| const resetPasswordError = new ResetPasswordError(); | ||
|
|
||
| const { screen } = resetPasswordError; | ||
| const data = screen.data; | ||
|
|
||
| console.log(data); |
Oops, something went wrong.