cby-auth

1.1.53 verified Fri May 01 auth: no javascript

CodeBy React auth wrapper & components providing authentication UI and logic for React applications using Apollo Client and GraphQL. The latest version is 1.1.53, with moderate release activity. It integrates with apollo-boost, react-apollo, lodash, and prop-types. Unlike generic auth libraries, it provides ready-to-use components like CBYAuthScreen that handle authentication flows with GraphQL backends.

Common errors

error Module not found: Can't resolve 'apollo-boost' ↓

cause Missing peer dependency apollo-boost

fix

npm install apollo-boost

error TypeError: Cannot read property 'query' of undefined ↓

cause Apollo client not provided via ApolloProvider

fix

Wrap component tree with <ApolloProvider client={client}>

Warnings

gotcha Package requires peer dependencies: apollo-boost, graphql, lodash, prop-types, react, react-apollo, react-dom. Missing them causes runtime errors. ↓

fix Install all peer dependencies manually: npm install apollo-boost graphql lodash prop-types react react-apollo react-dom

gotcha CBYAuthScreen and other components expect an Apollo Client context via react-apollo; not wrapping the app with ApolloProvider will cause errors. ↓

fix Wrap your app with <ApolloProvider client={client}> before using any cby-auth components.

gotcha Package name 'cby-auth' might be confused with 'cby-auth2' or alternative versions; ensure using the correct package. ↓

fix Check the package name on npm: 'cby-auth' (this one) vs 'cby-auth2'.

Install

npm install cby-auth

yarn add cby-auth

pnpm add cby-auth

Imports

CBYAuthScreen

wrong

import CBYAuthScreen from 'cby-auth'

correct

import { CBYAuthScreen } from 'cby-auth'

CBYAuthScreen is a named export, not default.

CBYAuthContext

wrong

const CBYAuthContext = require('cby-auth').CBYAuthContext

correct

import { CBYAuthContext } from 'cby-auth'

ESM import recommended; CommonJS require also works.

cbyAuth

wrong

import cbyAuth from 'cby-auth'

correct

import { cbyAuth } from 'cby-auth'

cbyAuth is a named export.

Quickstart

Minimal setup: render the CBYAuthScreen component to display authentication form.

import React from 'react';
import { CBYAuthScreen } from 'cby-auth';

function App() {
  return <CBYAuthScreen />;
}

export default App;