npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react_native-icp-auth

v1.0.0

Published

A helper package for developers to easily authenticate using internet identity in their react native apps

Downloads

6

Readme

react_native-icp-auth

A helper package for react native developers to authenticate using internet identity

Installation

npm i --force react_native-icp-auth

Peer dependency polyfills

Required for usage of crypto in react native environment

npm i --force react-native-webview-crypto
// use it in root (index.js/ts)

import PolyfillCrypto from 'react-native-webview-crypto'

const RootComponent: React.FC = () => {

  return (
    <>
      <PolyfillCrypto />
      <NavigationContainer linking={linking}>
        <Stack.Navigator initialRouteName='Launch'>
          <Stack.Screen options={{headerShown:false}} name='Launch' component={App} initialParams={{handleLogin}}/>
        </Stack.Navigator>
      </NavigationContainer>
    </>
  );
};

Usage

Functions Provided

1. handleLogin : Used for users to authenticate using Internet identity , this methods take 3 arguments : environment , canisters , appName(in lowercase).If any error occurs, it returns the error, if the authentication is complete then the Object that is returned by the function looks like :

  //object returned on successful authentication :

   {
      principal:"contains principal of the user",
      actors:[array of actors bound with Internte Identity]
   }

Arguments used by handle login

Environment :

const environment={
    // if isTesting is true environment will be set to local , otherwise mainnet Internet Identity provider will be used, should be true only if dealing with the mainnet canisters
    isTesting:true,

    //these 3 are only applicable if isTesting is true, i.e. these are optional and should be used only when using the package to interact with local canisters

    middlepageID:"a3shf-5eaaa-aaaaa-qaafa-cai",//canister id of the locally deployed middlepage

    backendID:"a4tbr-q4aaa-aaaaa-qaafq-cai",//canister id of locally deployed backend containing whoami function

    backendIDL:idlFactory//idlfactory of locally deployed backend canister
  }

  //for mainnet canisters use environment as :
  const environment={
    isTesting:false
  }

Canisters :

// array containing info about all the canisters developer needs to bind with the Internet Identity after authentication.

//idl factories can be imported from in src/declarations/<canister-name>/<canister-name>.did.js
import {idlFactory} from '../../src/declarations/backend/backend.did.js'

const canisters=[
  {
    idlFactory:idlFactory,

    //You can get canister IDs when you deploy you canisters using 'dfx deploy' or 'dfx deploy --network ic' 
    id:"a4tbr-q4aaa-aaaaa-qaafq-cai"
  },

]

App Name : Can be passed as a string, necessary for redirecting back to the app after successful authentication by the middle page.Also you need to insert this code in your android / app / src / main / AndroidManifest.xml :

<intent-filter>
  <action android:name="android.intent.action.VIEW" />
  <category android:name="android.intent.category.DEFAULT" />
  <category android:name="android.intent.category.BROWSABLE" />
  <data android:scheme="your-app-name" android:host="auth" />
</intent-filter>

2. autoLogin : Should be placed inside the useeffect hook of the initialRoute. This function scans if any previous Internet Identity authenticated data is stored locally and if any previous data is found, it automatically authenticates the user. for takes 2 arguments environment and canisters which are same as described for the handleLogin function.Consoles err if something went wrong, Return type of this function resembles this object :

// Response If previous data is found : 
{
 found:true,
 principal:"user's principal",
 actors:[array of Internet Identity bound actors]
}

// Response If no data found : 
{
 found:false,
 msg:"NO previous user data found"
}

3. handleLogout : Takes no parameters and returns nothing. Clears the data stored locally on mobile related to Internet Identity authentication and reload the app in order to prevent any agent state clashed resulting in unnecessary errrors and warnings.

Example usage for local canisters :

Code for backend and middlePage canisters can be found in this repository. take the two actors and deploy them locally, use dfx generate command to get the declarations for the same

  import {idlFactory} from '../../src/declarations/canister1/canister1.did.js'
  import {idlFactory as idlFactory2} from '../../src/declarations/canister2/canister2.did.js'

  const environment={
    isTesting:true,
    middlepageID:"a3shf-5eaaa-aaaaa-qaafa-cai", //canister id of the locally deployed middlepage
    backendID:"a4tbr-q4aaa-aaaaa-qaafq-cai", //canister id of locally deployed backend containing whoami function
    backendIDL:idlFactory //idlfactory of locally deployed backed canister
  }
  const appName="demo"
  const canisters=[
    {
      idlFactory:idlFactory,
      id:"a4tbr-q4aaa-aaaaa-qaafq-cai"
    },
    {
      idlFactory:idlFactory2,
      id:"b3tbr-q4aaa-aaaaa-qaafq-cai"
    },
  ]
  //for logging in, returns principal and bound actors
  let res=await handleLogin(environment,canisters,appName)
  
  //for automatic logging in, returns principal and bound actors
  let res2=await autologin(environment,canisters)

  //for user logout 
  logout()

Example usage for mainnet canisters :

  import {idlFactory} from '../../src/declarations/canister1/canister1.did.js'
  import {idlFactory as idlFactory2} from '../../src/declarations/canister2/canister2.did.js'

  const environment={
    isTesting:false,
  }
  const appName="demo"
  const canisters=[
    {
      idlFactory:idlFactory,
      id:"a4tbr-q4aaa-aaaaa-qaafq-cai"
    },
    {
      idlFactory:idlFactory2,
      id:"b3tbr-q4aaa-aaaaa-qaafq-cai"
    },
  ]
  //for logging in, returns principal and bound actors
  let res=await handleLogin(environment,canisters,appName)
  
  //for automatic logging in, returns principal and bound actors
  let res2=await autologin(environment,canisters)

  //for user logout 
  logout()

In-depth Example usage of this package can be found in this repository.

Considerations

  1. Make sure to use handleLogin method inside the root component itself (index.js) and then pass it to other components using a context provider to avoid any errors.
  2. For local testing of the project you need to setup local internet identity provider. Also deploy your own middlepage and backend canister necessary for authentication and pass their IDs and backend idlfactory inside environment argument when using handleLogin and autoLogin functions. The code for the middlepage frontend canisters,backend canister as well as declarations( idlfactory ) can be found in this repository, You can navigate through the demo project and find the canister code with the help of dfx.json.

License

MIT