Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@corbado/react-sdk

Package Overview
Dependencies
Maintainers
5
Versions
31
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@corbado/react-sdk - npm Package Compare versions

Comparing version 0.1.7-alpha.3 to 0.1.7-alpha.4

LICENSE

21

dist/contexts/CorbadoContext.d.ts

@@ -12,18 +12,27 @@ /// <reference types="react" />

loading: boolean;
/** Email OTP APIs */
initSignUpWithEmailOTP: (email: string, username: string) => Promise<Result<void, InitSignUpWithEmailOTPError | undefined>>;
completeSignUpWithEmailOTP: (code: string) => Promise<Result<void, CompleteSignupWithEmailOTPError | undefined>>;
initLoginWithEmailOTP: (email: string) => Promise<Result<void, InitLoginWithEmailOTPError | undefined>>;
completeLoginWithEmailOTP: (code: string) => Promise<Result<void, CompleteLoginWithEmailOTPError | undefined>>;
/** Email Link APIs */
initSignUpWithEmailLink: (email: string, username: string) => Promise<Result<void, InitSignUpWithEmailOTPError | undefined>>;
completeSignUpWithEmailLink: (code: string) => Promise<Result<void, CompleteSignupWithEmailOTPError | undefined>>;
initLoginWithEmailLink: (email: string) => Promise<Result<void, InitLoginWithEmailOTPError | undefined>>;
completeLoginWithEmailLink: (code: string) => Promise<Result<void, CompleteLoginWithEmailOTPError | undefined>>;
/** Passkey Authentication APIs */
signUpWithPasskey: (email: string, username: string) => Promise<Result<void, SignUpWithPasskeyError | undefined>>;
loginWithPasskey: (email: string) => Promise<Result<void, LoginWithPasskeyError | undefined>>;
loginWithConditionalUI: () => Promise<Result<void, LoginWithPasskeyError | undefined>>;
initLoginWithEmailOTP: (email: string) => Promise<Result<void, InitLoginWithEmailOTPError | undefined>>;
completeLoginWithEmailOTP: (code: string) => Promise<Result<void, CompleteLoginWithEmailOTPError | undefined>>;
logout: () => void;
initSignUpWithEmailOTP: (email: string, username: string) => Promise<Result<void, InitSignUpWithEmailOTPError | undefined>>;
completeSignUpWithEmailOTP: (code: string) => Promise<Result<void, CompleteSignupWithEmailOTPError | undefined>>;
appendPasskey: () => Promise<Result<void, AppendPasskeyError | undefined>>;
getUserAuthMethods: (email: string) => Promise<Result<UserAuthMethods, AuthMethodsListError | undefined>>;
/** Passkey Management APIs */
getPasskeys: () => Promise<Result<PassKeyList, PasskeyListError>>;
deletePasskey: (id: string) => Promise<Result<void, PasskeyDeleteError>>;
/** Other APIs */
getProjectConfig: () => Promise<Result<ProjectConfig, GetProjectConfigError | undefined>>;
getUserAuthMethods: (email: string) => Promise<Result<UserAuthMethods, AuthMethodsListError | undefined>>;
userExists(email: string): Promise<Result<boolean, RecoverableError | undefined>>;
logout: () => void;
}
export declare const initialContext: CorbadoContextProps;
export declare const CorbadoContext: import("react").Context<CorbadoContextProps>;
export * from './CorbadoProvider';
export * from './CorbadoContext';
/// <reference types="react" />
import type { CorbadoContextProps } from '../contexts';
import type { CorbadoContextProps } from '../contexts/CorbadoContext';
export declare const useCorbado: (context?: import("react").Context<CorbadoContextProps>) => CorbadoContextProps;

@@ -1,2 +0,2 @@

import*as e from"@corbado/web-core";import*as r from"react";var a={d:(e,r)=>{for(var s in r)a.o(r,s)&&!a.o(e,s)&&Object.defineProperty(e,s,{enumerable:!0,get:r[s]})},o:(e,r)=>Object.prototype.hasOwnProperty.call(e,r)},s={};a.d(s,{kr:()=>c,Hg:()=>d,lH:()=>o.InvalidEmailError,bu:()=>o.InvalidFullnameError,zT:()=>o.InvalidOtpInputError,CU:()=>o.InvalidPasskeyError,nJ:()=>o.NoPasskeyAvailableError,X$:()=>o.PasskeyChallengeCancelledError,eA:()=>o.UnknownUserError,k5:()=>o.UserAlreadyExistsError,du:()=>u,km:()=>E});const o=(t={CorbadoApp:()=>e.CorbadoApp,InvalidEmailError:()=>e.InvalidEmailError,InvalidFullnameError:()=>e.InvalidFullnameError,InvalidOtpInputError:()=>e.InvalidOtpInputError,InvalidPasskeyError:()=>e.InvalidPasskeyError,NoPasskeyAvailableError:()=>e.NoPasskeyAvailableError,PasskeyChallengeCancelledError:()=>e.PasskeyChallengeCancelledError,UnknownUserError:()=>e.UnknownUserError,UserAlreadyExistsError:()=>e.UserAlreadyExistsError},i={},a.d(i,t),i);var t,i;const l=(e=>{var r={};return a.d(r,e),r})({createContext:()=>r.createContext,default:()=>r.default,useCallback:()=>r.useCallback,useContext:()=>r.useContext,useEffect:()=>r.useEffect,useMemo:()=>r.useMemo,useRef:()=>r.useRef,useState:()=>r.useState}),n=()=>{throw new Error("Please make sure that your components are wrapped inside <CorbadoProvider/>")},u={corbadoApp:void 0,shortSession:void 0,user:void 0,globalError:void 0,loading:!1,signUpWithPasskey:n,loginWithPasskey:n,loginWithConditionalUI:n,initLoginWithEmailOTP:n,completeLoginWithEmailOTP:n,logout:n,initSignUpWithEmailOTP:n,completeSignUpWithEmailOTP:n,appendPasskey:n,getPasskeys:n,deletePasskey:n,getUserAuthMethods:n,getProjectConfig:n,userExists:n},c=(0,l.createContext)(u),d=({children:e,corbadoAppInstance:r,...a})=>{const[s]=(0,l.useState)((()=>null!=r?r:new o.CorbadoApp(a))),[t,i]=(0,l.useState)(),[n,u]=(0,l.useState)(),[d,E]=(0,l.useState)(!0),[h,k]=(0,l.useState)(),p=(0,l.useRef)(!1);(0,l.useEffect)((()=>{p.current||(E(!0),s.init(),s.authService.shortSessionChanges.subscribe((e=>{void 0!==e&&i(e)})),s.authService.userChanges.subscribe((e=>{void 0!==e&&u(e)})),s.globalErrors.subscribe((e=>{k(e)})),p.current=!0,E(!1))}),[]);const v=(0,l.useCallback)(((e,r)=>s.authService.signUpWithPasskey(e,r)),[s]),C=(0,l.useCallback)((e=>s.authService.loginWithPasskey(e)),[s]),g=(0,l.useCallback)((()=>s.authService.loginWithConditionalUI()),[s]),b=(0,l.useCallback)((()=>s.authService.appendPasskey()),[s]),P=(0,l.useCallback)((()=>s.authService.passkeyList()),[s]),m=(0,l.useCallback)((e=>s.authService.passkeyDelete(e)),[s]),y=(0,l.useCallback)((e=>s.authService.initLoginWithEmailOTP(e)),[s]),S=(0,l.useCallback)((e=>s.authService.completeLoginWithEmailOTP(e)),[s]),U=(0,l.useCallback)((()=>{s.authService.logout(),i(void 0),u(void 0)}),[s]),I=(0,l.useCallback)(((e,r)=>s.authService.initSignUpWithEmailOTP(e,r)),[s]),W=(0,l.useCallback)((e=>s.authService.completeSignupWithEmailOTP(e)),[s]),f=(0,l.useCallback)((e=>s.authService.authMethods(e)),[s]),O=(0,l.useCallback)((e=>s.authService.userExists(e)),[s]),A=(0,l.useCallback)((()=>s.projectService.getProjectConfig()),[s]),x=(0,l.useMemo)((()=>({corbadoApp:s,shortSession:t,user:n,globalError:h,loading:d,signUpWithPasskey:v,loginWithPasskey:C,loginWithConditionalUI:g,initLoginWithEmailOTP:y,completeLoginWithEmailOTP:S,logout:U,initSignUpWithEmailOTP:I,completeSignUpWithEmailOTP:W,appendPasskey:b,getPasskeys:P,deletePasskey:m,getUserAuthMethods:f,getProjectConfig:A,userExists:O})),[s,t,n,h,d,v,C,g,y,S,U,I,W,b,P,m,f,A,O]);return l.default.createElement(c.Provider,{value:x},e)},E=(e=c)=>(0,l.useContext)(e);var h=s.kr,k=s.Hg,p=s.lH,v=s.bu,C=s.zT,g=s.CU,b=s.nJ,P=s.X$,m=s.eA,y=s.k5,S=s.du,U=s.km;export{h as CorbadoContext,k as CorbadoProvider,p as InvalidEmailError,v as InvalidFullnameError,C as InvalidOtpInputError,g as InvalidPasskeyError,b as NoPasskeyAvailableError,P as PasskeyChallengeCancelledError,m as UnknownUserError,y as UserAlreadyExistsError,S as initialContext,U as useCorbado};
import*as e from"@corbado/web-core";import*as a from"react";var i={d:(e,a)=>{for(var r in a)i.o(a,r)&&!i.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:a[r]})},o:(e,a)=>Object.prototype.hasOwnProperty.call(e,a)},r={};i.d(r,{Hg:()=>E,lH:()=>t.InvalidEmailError,bu:()=>t.InvalidFullnameError,zT:()=>t.InvalidOtpInputError,CU:()=>t.InvalidPasskeyError,nJ:()=>t.NoPasskeyAvailableError,X$:()=>t.PasskeyChallengeCancelledError,eA:()=>t.UnknownUserError,k5:()=>t.UserAlreadyExistsError,km:()=>h});const t=(s={CorbadoApp:()=>e.CorbadoApp,InvalidEmailError:()=>e.InvalidEmailError,InvalidFullnameError:()=>e.InvalidFullnameError,InvalidOtpInputError:()=>e.InvalidOtpInputError,InvalidPasskeyError:()=>e.InvalidPasskeyError,NoPasskeyAvailableError:()=>e.NoPasskeyAvailableError,PasskeyChallengeCancelledError:()=>e.PasskeyChallengeCancelledError,UnknownUserError:()=>e.UnknownUserError,UserAlreadyExistsError:()=>e.UserAlreadyExistsError},l={},i.d(l,s),l);var s,l;const o=(e=>{var a={};return i.d(a,e),a})({createContext:()=>a.createContext,default:()=>a.default,useCallback:()=>a.useCallback,useContext:()=>a.useContext,useEffect:()=>a.useEffect,useMemo:()=>a.useMemo,useRef:()=>a.useRef,useState:()=>a.useState}),n=()=>{throw new Error("Please make sure that your components are wrapped inside <CorbadoProvider/>")},u={corbadoApp:void 0,shortSession:void 0,user:void 0,globalError:void 0,loading:!1,signUpWithPasskey:n,loginWithPasskey:n,loginWithConditionalUI:n,initLoginWithEmailOTP:n,completeLoginWithEmailOTP:n,logout:n,initSignUpWithEmailOTP:n,completeSignUpWithEmailOTP:n,initSignUpWithEmailLink:n,completeSignUpWithEmailLink:n,initLoginWithEmailLink:n,completeLoginWithEmailLink:n,appendPasskey:n,getPasskeys:n,deletePasskey:n,getUserAuthMethods:n,getProjectConfig:n,userExists:n},c=(0,o.createContext)(u),E=({children:e,corbadoAppInstance:a,...i})=>{const[r]=(0,o.useState)((()=>null!=a?a:new t.CorbadoApp(i))),[s,l]=(0,o.useState)(),[n,u]=(0,o.useState)(),[E,h]=(0,o.useState)(!0),[d,k]=(0,o.useState)(),p=(0,o.useRef)(!1);(0,o.useEffect)((()=>{p.current||(h(!0),r.init(),r.authService.shortSessionChanges.subscribe((e=>{void 0!==e&&l(e)})),r.authService.userChanges.subscribe((e=>{void 0!==e&&u(e)})),r.globalErrors.subscribe((e=>{k(e)})),p.current=!0,h(!1))}),[]);const g=(0,o.useCallback)(((e,a)=>r.authService.signUpWithPasskey(e,a)),[r]),m=(0,o.useCallback)((e=>r.authService.loginWithPasskey(e)),[r]),v=(0,o.useCallback)((()=>r.authService.loginWithConditionalUI()),[r]),C=(0,o.useCallback)((()=>r.authService.appendPasskey()),[r]),b=(0,o.useCallback)((()=>r.authService.passkeyList()),[r]),P=(0,o.useCallback)((e=>r.authService.passkeyDelete(e)),[r]),S=(0,o.useCallback)((e=>r.authService.initLoginWithEmailLink(e)),[r]),y=(0,o.useCallback)((()=>r.authService.completeLoginWithEmailLink()),[r]),W=(0,o.useCallback)(((e,a)=>r.authService.initSignUpWithEmailLink(e,a)),[r]),U=(0,o.useCallback)((()=>r.authService.completeSignupWithEmailLink()),[r]),L=(0,o.useCallback)((e=>r.authService.initLoginWithEmailOTP(e)),[r]),I=(0,o.useCallback)((e=>r.authService.completeLoginWithEmailOTP(e)),[r]),f=(0,o.useCallback)(((e,a)=>r.authService.initSignUpWithEmailOTP(e,a)),[r]),O=(0,o.useCallback)((e=>r.authService.completeSignupWithEmailOTP(e)),[r]),A=(0,o.useCallback)((e=>r.authService.authMethods(e)),[r]),x=(0,o.useCallback)((e=>r.authService.userExists(e)),[r]),T=(0,o.useCallback)((()=>r.projectService.getProjectConfig()),[r]),w=(0,o.useCallback)((()=>{r.authService.logout(),l(void 0),u(void 0)}),[r]),j=(0,o.useMemo)((()=>({corbadoApp:r,shortSession:s,user:n,globalError:d,loading:E,signUpWithPasskey:g,loginWithPasskey:m,loginWithConditionalUI:v,initLoginWithEmailOTP:L,completeLoginWithEmailOTP:I,initSignUpWithEmailOTP:f,completeSignUpWithEmailOTP:O,initLoginWithEmailLink:S,completeLoginWithEmailLink:y,initSignUpWithEmailLink:W,completeSignUpWithEmailLink:U,appendPasskey:C,getPasskeys:b,deletePasskey:P,getUserAuthMethods:A,getProjectConfig:T,userExists:x,logout:w})),[r,s,n,d,E,w,g,m,v,L,I,f,O,S,y,W,U,C,b,P,A,T,x]);return o.default.createElement(c.Provider,{value:j},e)},h=(e=c)=>(0,o.useContext)(e);var d=r.Hg,k=r.lH,p=r.bu,g=r.zT,m=r.CU,v=r.nJ,C=r.X$,b=r.eA,P=r.k5,S=r.km;export{d as CorbadoProvider,k as InvalidEmailError,p as InvalidFullnameError,g as InvalidOtpInputError,m as InvalidPasskeyError,v as NoPasskeyAvailableError,C as PasskeyChallengeCancelledError,b as UnknownUserError,P as UserAlreadyExistsError,S as useCorbado};
//# sourceMappingURL=index.js.map
{
"name": "@corbado/react-sdk",
"version": "0.1.7-alpha.3",
"version": "0.1.7-alpha.4",
"description": "This SDK is for developers who want to add Corbado's Authentication management in their applications but want to use a UI flow of their own.",

@@ -38,9 +38,9 @@ "author": "Abdullah Shahbaz <abdullah_ghani@live.com>",

"dependencies": {
"@corbado/web-core": "^0.1.7-alpha.3"
"@corbado/web-core": "^0.1.7-alpha.4"
},
"devDependencies": {
"@corbado/types": "^0.1.1-alpha.3",
"@corbado/types": "^0.1.1-alpha.4",
"@types/react": "^18.2.0"
},
"gitHead": "746086968c769513b83f2c62d3ba4a6488425c92"
"gitHead": "3bd63094494204828688170d7461932d5786de53"
}

@@ -1,14 +0,240 @@

# `react-sdk`
<img width="1070" alt="GitHub Repo Cover" src="https://github.com/corbado/corbado-php/assets/18458907/aa4f9df6-980b-4b24-bb2f-d71c0f480971">
This SDK is for developers who want to add Corbado's Authentication management in their applications but want to use a UI flow of their own.
# @corbado/react-sdk
> TODO: Add more details about the package here.
[![License](https://img.shields.io/badge/license-MIT-green)](https://github.com/corbado/javascript/blob/readme_documentation/LICENSE)
[![Documentation](https://img.shields.io/badge/documentation-available-brightgreen)](https://docs.corbado.com/overview/welcome)
[![Slack](https://img.shields.io/badge/slack-community-blueviolet)](https://join.slack.com/t/corbado/shared_invite/zt-1b7867yz8-V~Xr~ngmSGbt7IA~g16ZsQ)
[![npm version](https://img.shields.io/npm/v/@corbado/react)](https://www.npmjs.com/package/@corbado/react)
> TODO: Add examples of how to use the package.
---
> TODO: Publish the package to npm.
## Table of Contents
## Noticeable concepts
- [Overview](#overview)
- [🚀 Getting Started](#-getting-started)
- [Prerequisites](#prerequisites)
- [Installation](#installation)
- [Setting up the package](#setting-up-the-package)
- [📌 Usage](#-usage)
- [Accessing Authentication State](#accessing-authentication-state)
- [Implementing Custom Authentication Flows](#implementing-custom-authentication-flows)
- [Signup with Passkey](#signup-with-passkey)
- [Signup with Email OTP](#signup-with-email-otp)
- [Login with Passkey](#login-with-passkey)
- [Conditional UI Login](#conditional-ui-login)
- [Logging Out](#logging-out)
- [💡 Example Application](#-example-application)
- [📄 Documentation & Support](#-documentation--support)
- [🔒 License](#-license)
- We try to keep this package as simple as possible
- It should contain no logic related directly to UI because this package will only be used by developers who want to use their own UI
---
## Overview
The `@corbado/react-sdk` package is tailored for React applications that require more control over authentication flows, providing a flexible and robust solution for managing authentication states without prebuilt UI components.
---
## 🚀 Getting Started
### Prerequisites
- React v18+
- Node.js `>=18.17.0` or later
### Installation
```bash
npm install @corbado/react-sdk
```
### Setting up the package
Initialize `CorbadoProvider` at the root of your application:
```tsx
import { CorbadoProvider } from '@corbado/react-sdk';
function App() {
return (
<CorbadoProvider projectId='pro-XXXXXXXXXXXXXXXXXXXX'>
{/* Your routes and other components go here */}
</CorbadoProvider>
);
}
export default App;
```
---
## 📌 Usage
### Accessing Authentication State
Utilize the `useCorbado` hook to access authentication states like `user` and `shortSession`.:
```tsx
import { useCorbado } from '@corbado/react-sdk';
const HomePage = () => {
const { user, shortSession, loading } = useCorbado();
if (loading) {
// Render loading state
}
if (user) {
// Render authenticated state
}
// Additional implementation
};
export default HomePage;
```
**Remember to check `loading` state of the hook before using authentication states**
### Implementing Custom Authentication Flows
The `@corbado/react-sdk` allows for the implementation of custom authentication flows, including login, signup, and conditional UI logic.
#### Signup with Passkey
For signing up users with a passkey, use the `signUpWithPasskey` method:
```tsx
import { useCorbado } from '@corbado/react-sdk';
const SignupPage = () => {
const { signUpWithPasskey } = useCorbado();
const handleSignup = async (email: string, username: string) => {
const result = await signUpWithPasskey(email, username);
if (!result.err) {
// Handle successful signup
} else {
// Handle signup error
}
};
// Render your signup form here
};
```
#### Signup with Email OTP
For signing up users with a email OTP, use the `initSignUpWithEmailOTP` & `completeSignUpWithEmailOTP` method:
```tsx
import { useCorbado } from '@corbado/react-sdk';
const CompleteEmailOtpSignup = () => {
const { initSignUpWithEmailOTP, completeSignUpWithEmailOTP } = useCorbado();
const handleInitSignup = async (email: string, username: string) => {
const result = await initSignUpWithEmailOTP(email, username);
//Handle init response, e.g. by rendering an input field where the user can enter the code he has just received.
};
const handleCompleteSignup = async (otpCode: string) => {
const result = await completeSignUpWithEmailOTP(otpCode);
// Handle completion response
};
// Render form to input OTP
};
```
#### Login with Passkey
To implement a login flow using a passkey, use the `loginWithPasskey` method:
```tsx
import { useCorbado } from '@corbado/react-sdk';
const LoginPage = () => {
const { loginWithPasskey } = useCorbado();
const handleLogin = async (email: string) => {
const result = await loginWithPasskey(email);
if (!result.err) {
// Handle successful login
} else {
// Handle login error
}
};
// Render your login form here
};
```
#### Conditional UI Login
Conditional UI logic can be used to streamline the login process. For instance, you might want to automatically prompt the user to use a passkey if available. The `loginWithConditionalUI` method can be utilized for this purpose:
```tsx
import { useCorbado, PasskeyChallengeCancelledError } from '@corbado/react-sdk';
const ConditionalLoginPage = () => {
const { loginWithConditionalUI } = useCorbado();
const handleConditionalLogin = async () => {
const response = await loginWithConditionalUI();
if (!response.err) {
// Handle successful login
} else if (response.val instanceof PasskeyChallengeCancelledError) {
// Handle scenario where passkey challenge was cancelled
} else {
// Handle other errors
}
};
// Render your login form here and call handleConditionalLogin in useEffect
};
```
### Logging Out
Implement logout functionality easily with the `logout` method from the `useCorbado` hook:
```tsx
import { useCorbado } from '@corbado/react-sdk';
const LogoutButton = () => {
const { logout } = useCorbado();
const handleLogout = () => {
logout();
// Redirect or perform additional actions after logout
};
// UI logic and styling for logout button
};
export default LogoutButton;
```
In each of these examples, you're calling different authentication methods provided by `@corbado/react-sdk`. These methods return a result object that indicates whether the operation was successful (`err` property) and provides additional details or error information (`val` property).
Remember to replace the example logic with real implementations that fit the specific needs of your application. The rendering of forms and the handling of form inputs are not covered here, as they can vary greatly depending on your UI library or custom components.
---
## 💡 Example Application
- For a detailed example using the `@corbado/react-sdk` package checkout the [example application](https://react-sdk.demo.corbado.io) and its [source code](https://github.com/corbado/javascript/tree/main/examples/react-sdk)
---
## 📄 Documentation & Support
For support and questions please visit our [Slack channel](https://join.slack.com/t/corbado/shared_invite/zt-1b7867yz8-V~Xr~ngmSGbt7IA~g16ZsQ).
For more detailed information and advanced configuration options, please visit our [Documentation Page](https://docs.corbado.com/overview/welcome).
---
## 🔒 License
This project is licensed under the MIT License - see the [LICENSE](https://github.com/corbado/javascript/blob/readme_documentation/LICENSE) file for details.

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc