Home

Awesome

react-native-appwrite-oauth

React Native component that implements the OAuth2 flow for the Appwrite BaaS (Backend-as-a-Service). It's based in a Modal implementation containing a WebView, that will be used to authenticate against OAuth providers, and internally uses an instance of the Appwrite Web SDK passed to the component via props.

Installation

npm install react-native-appwrite-oauth

React Native Appwrite OAuth depends on the libraries appwrite, react-native-webview and @react-native-cookies/cookies. These dependencies are marked as peer dependencies, and need to be fullfilled before using the component. If you were already using them in your project, then you are good to go, otherwise please run:

npm install appwrite react-native-webview @react-native-cookies/cookies

Basic Usage

In order to use the component, you just need to place it anywhere in your screen, as shown below:

import AppwriteOauth from 'react-native-appwrite-oauth';

// ...

// Init your Web SDK
import {Client, Account} from 'appwrite';

const client = new Client();
const account = new Account(client);

client.setEndpoint(ENDPOINT).setProject(PROJECT);

// ...

const YourOAuthSigninComponent = () => {
  const [authenticating, setAuthenticating] = useState(false);

  const handleSuccess = () => {
    // End OAuth sign in and close the modal
    setAuthenticating(false);
    // OAuth Sign in successful.
    // Do something here like navigation to a protected screen
  };

  const handleFailure = (error) => {
    // End OAuth sign in and close the modal
    setAuthenticating(false);
    Alert.alert('OAuth Sign In', error);
  };

  return (
    <View>
      <AppwriteOauth
        account={account}
        authenticating={authenticating}
        provider="facebook"
        onSuccess={handleSuccess}
        onFailure={handleFailure}
      />
      <Button
        title="Facebook Sign In"
        onPress={() => {
          // Start OAuth Sign in
          setAuthenticating(true);
        }}
      />
    </View>
  );
};

// ...

Using a Custom Layout

By default, the component displays within the modal, a layout composed of a Cancel button, and a WebView to perform the OAuth flow over the web. In this default layout, when you click the Cancel button, the onFailure callback will be called with a 'User cancelled' message.

If for some reason you need more control on what gets displayed inside the modal component, you need to display more components besides the Button and the WebView, or simply render the WebView above a "Back" button, you can pass your own layout as a React Component Type in the modalLayout prop.

As usual, please make sure to provide enough space through styles, for the content of the modal to be seen. In many cases, if you were not able to see the contents of the WebView might have been because the container View was not taking enough space in the screen.

// ...

const MyLayout = ({ WebViewComponent }) => (
  <View>
    <Button title="Cancel" onPress={() => handleFailure('User cancelled')} />
    <WebViewComponent />
    <Button title="Force Success" onPress={() => handleSuccess()} />
  </View>
);

// ...

return (
  <View>
    <AppwriteOauth
      account={account}
      authenticating={authenticating}
      provider="github"
      scopes={['user:email']}
      onSuccess={handleSuccess}
      onFailure={handleFailure}
      modalLayout={MyLayout}
    />
    <Button title="Github Sign In" onPress={() => setAuthenticating(true)} />
  </View>
);

// ...

Example

You can find a complete react native example that implements the entire OAuth2 flow (including navigation with React Navigation), in the "example" folder. Feel free to use it as a reference.

In order to run the example, after cloning this repository, you will need to install all the dependencies by running:

yarn

Then open the example/src/sdk.ts file, and provide the values for setEndpoint and setProject, pointing to your respective Appwrite API server and project.

const client = new Client();
const account = new Account(client);

// Fill with your Appwrite API endpoint and Project ID!
client.setEndpoint('http://localhost/v1').setProject('123456789');

Finally run the code in your desired platform, using one of the following commands:

To run the example app on Android:

yarn example android

To run the example app on iOS:

yarn example ios

Props

Remarks

@Override
public void onReceivedSslError(final WebView webView, final SslErrorHandler handler, final SslError error) {
  handler.proceed();
  /*
    // onReceivedSslError is called for most requests, per Android docs: https://developer.android.com/reference/android/webkit/WebViewClient#onReceivedSslError(android.webkit.WebView,%2520android.webkit.SslErrorHandler,%2520android.net.http.SslError)
    // WebView.getUrl() will return the top-level window URL.
    // If a top-level navigation triggers this error handler, the top-level URL will be the failing URL (not the URL of the
    ....
    ....
    ....
  */
}

// Init your Web SDK with https and complete the OAuth sign in
const client = new Client();
const account = new Account(client);

client.setEndpoint('https://localhost/v1').setProject('123456789');

// ...

// Once the OAuth Sign in has completed successfully,
// switch to http and continue using the SDK
client.setEndpoint(`http://localhost/v1`);
const accountData = await account.get();

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT