👋
Welcome to @oneclickdapp/ethereum-auth
Ethereum wallet login provider for RedwoodJS projects
✨ See it
See source code in /examples
🛠️ Set up
If this is your first time using Redwood Auth, you should first familiarize yourself with how Redwood authentication works.
Create a new redwood app:
yarn create redwood-app myDapp
See my introductory blog post for more help getting started.
Scaffolding
First let's do some scaffolding and install the necessary packages. This is where the
cd myDapp
yarn rw setup auth ethereum
Until Redwood PR #3337 has been released, the CLI command above won't add two files. You'll need to add these manually to your project for now:
- https://github.com/oneclickdapp/ethereum-auth/blob/master/examples/eth-auth-demo/api/src/graphql/authDetails.sdl.js
- https://github.com/oneclickdapp/ethereum-auth/blob/master/examples/eth-auth-demo/api/src/services/ethereumAuth/ethereumAuth.js
You should now have a new ethereumAuth
service and sdl files, and a few new dependencies (including this package). If you're curious how the auth service works, check out api/src/services/ethereumAuth/ethereumAuth.js
Next we need to update our models. Add address
to the User model, and create a new AuthDetail
model:
// api/db/schema.prisma
model User {
id String @id @default(uuid())
address String @unique
authDetail AuthDetail @relation(fields: [authDetailId], references: [id])
authDetailId String
}
model AuthDetail {
id String @id @default(uuid())
nonce String
timestamp DateTime @default(now())
User User?
}
Now lets use the generator for our user model.
yarn rw generate scaffold user
Awesomesauce! Let's spin up our database and apply the changes:
yarn rw prisma migrate dev
We're almost there! Create a server secret for issuing jwt tokens:
yarn rw g secret
# or
openssl rand -base64 48
Use the resulting string for ETHEREUM_JWT_SECRET
in your .env
file.
And don't forget to update your Redwood.toml
for including the environment variables in your hosted app.
[web]
includeEnvironmentVariables = ['ETHEREUM_JWT_SECRET', 'DATABASE_URL', 'INFURA_ID']
Webpack V5
Webpack V5 no longer injects some node modules automatically, which are required by the @walletconnect
dependencies. To fix this issue, you must add them manually to the webpack config in your RedwoodJS app.
Want to help out by removing this extra step? The
@walletconnect
V5 update issue is waiting for a champion!
If you haven't run this command already, create the config file:
yarn rw setup webpack
Then add the following to your config in web/config/webpack.config.js
:
const webpack = require("webpack");
// See https://github.com/WalletConnect/walletconnect-monorepo/issues/584
config.resolve.fallback = {
os: require.resolve(`os-browserify/browser`),
https: require.resolve(`https-browserify`),
http: require.resolve(`stream-http`),
stream: require.resolve(`stream-browserify`),
util: require.resolve(`util/`),
url: require.resolve(`url/`),
assert: require.resolve(`assert/`),
crypto: require.resolve(`crypto-browserify`)
};
config.plugins.push(
new webpack.ProvidePlugin({
process: "process/browser",
Buffer: ["buffer", "Buffer"]
})
);
Now install the missing 8 packages:
cd web
yarn add stream-browserify stream-http crypto-browserify https-browserify os-browserify util url assert
Test the app builds properly in development and production
yarn rw dev
# It works in development? Great!
yarn rw build
Done! You're ready to start using your shiny new Ethereum auth just like any other RedwoodJS auth provider.
Usage
Start your RedwoodJS app:
yarn rw dev
Here's a quick snippet to help get you started. Check out the /examples
folder for more.
// web/src/pages/LoginPage/LoginPage.js
import { Link, routes, navigate } from "@redwoodjs/router";
import { useAuth } from "@redwoodjs/auth";
import { useParams } from "@redwoodjs/router";
const LoginPage = () => {
const { logIn } = useAuth();
const { redirectTo } = useParams();
const onLogin = async () => {
await logIn();
navigate(redirectTo || routes.home());
};
return (
<>
<h1>LoginPage</h1>
<p>
You must have an ethereum wallet, such as MetaMask, installed in your
browser
</p>
<button onClick={onLogin}>Log in with Ethereum</button>
</>
);
};
export default LoginPage;
Options
Wallet Connect
You must pass at least one value rpc
or infuraId
to use Wallet Connect.
ethereum = new EthereumAuthClient({
makeRequest,
// Note: you must set NODE_ENV manually when using Netlify
debug: process.NODE_ENV !== "development",
infuraId: process.env.INFURA_ID
// For rpc see https://docs.walletconnect.org/quick-start/dapps/web3-provider#provider-options
});
Specify the wallet type by passing a String to logIn()
const { logIn, logOut, getCurrentUser } = useAuth()
const onClickWalletConnect = async () => {
await logIn({type: "walletConnect"})
Note: Don't forget to update Redwood.toml if you add new environment variables
Additional Resources
Now that you've completed setup, you might find these resources useful. More docs/examples are welcome here!
- Tutorial II Role-based access control (RBAC) https://redwoodjs.com/tutorial2/role-based-authorization-control-rbac
- Cookbook RBAC https://redwoodjs.com/cookbook/role-based-access-control-rbac
Developing
In this repo link and watch files:
yarn link
yarn watch
Then in your app, use the local linked package
yarn link @oneclickdapp/ethereum-auth
Advanced
If you're changes affect how internal stuff in RedwoodJS uses this package, then you'll need to do a bit more work. Things that may be affected include decoders in @redwoodjs/api
, frontend tooling in @redwoodjs/auth
, and CLI generators in @redwoodjs/cli
. Unfortunately, yarn link
will not work for redwood local development. Please follow the guide here https://github.com/redwoodjs/redwood/blob/main/CONTRIBUTING.md#local-development for more help.
# In the redwood repo
yarn build:watch
# Then in your example redwood app
yarn rwt copy:watch ../redwood
TODO
- [x] Add support for
walletconnect
- [ ] Add ethereum-auth the redwood (auth playground)[https://github.com/redwoodjs/playground-auth]
- [ ] Allow direct access to the ethers
provider
on the client. - [ ] Better error handling when wallet signing fails
- [ ] Export typescript types here for the user object, instead of declaring them inside
@redwoodjs/auth
- [ ] Add support for
walletlink
Publishing
yarn publish --dry-run
Resources
- Looking to implement your own custom Redwood Auth? You may find this tutorial helpful (it may be out-dated by now)
- Redwood Tutorial: getting started and complete overview guide.
- Redwood Docs: using the Redwood Router, handling assets and files, list of command-line tools, and more.
- Redwood Redwood Community: get help, share tips and tricks, and collaborate on everything about RedwoodJS.
Author
- Website: https://patrickgallagher.dev
- Twitter: @pi0neerpat
- GitHub: @pi0neerpat
Show your support
Give a
This README was generated with