2024-02-20 09:23:32 +00:00
<!doctype html>
2025-08-13 03:24:27 +00:00
< html lang = "en-GB" dir = "ltr" class = "docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-undefined" data-has-hydrated = "false" >
2024-02-20 09:23:32 +00:00
< head >
< meta charset = "UTF-8" >
2025-08-13 03:24:27 +00:00
< meta name = "generator" content = "Docusaurus v3.8.1" >
2025-10-03 05:55:52 +00:00
< title data-rh = "true" > Encrypt, Decrypt, and Sign Your Messages | Waku Documentation< / title > < meta data-rh = "true" name = "viewport" content = "width=device-width,initial-scale=1" > < meta data-rh = "true" name = "twitter:card" content = "summary_large_image" > < meta data-rh = "true" property = "og:url" content = "https://docs.waku.org/build/javascript/message-encryption" > < meta data-rh = "true" property = "og:locale" content = "en_GB" > < meta data-rh = "true" name = "docusaurus_locale" content = "en-GB" > < meta data-rh = "true" name = "docsearch:language" content = "en-GB" > < meta data-rh = "true" name = "keywords" content = "waku, web3" > < meta data-rh = "true" name = "image" content = "https://docs.waku.org/_og/fdb4549eb38bf411e407f3e0ffdbe76aa0e8e3d9.png" > < meta data-rh = "true" name = "docusaurus_version" content = "current" > < meta data-rh = "true" name = "docusaurus_tag" content = "docs-default-current" > < meta data-rh = "true" name = "docsearch:version" content = "current" > < meta data-rh = "true" name = "docsearch:docusaurus_tag" content = "docs-default-current" > < meta data-rh = "true" property = "og:title" content = "Encrypt, Decrypt, and Sign Your Messages | Waku Documentation" > < meta data-rh = "true" name = "description" content = "This guide provides detailed steps to use the @waku/message-encryption package to encrypt, decrypt, and sign your messages using Waku message payload encryption methods." > < meta data-rh = "true" property = "og:description" content = "This guide provides detailed steps to use the @waku/message-encryption package to encrypt, decrypt, and sign your messages using Waku message payload encryption methods." > < link data-rh = "true" rel = "icon" href = "/theme/image/favicon.ico" > < link data-rh = "true" rel = "canonical" href = "https://docs.waku.org/build/javascript/message-encryption" > < link data-rh = "true" rel = "alternate" href = "https://docs.waku.org/build/javascript/message-encryption" hreflang = "en-GB" > < link data-rh = "true" rel = "alternate" href = "https://docs.waku.org/build/javascript/message-encryption" hreflang = "x-default" > < link rel = "alternate icon" type = "image/png" href = "/theme/image/favicon.png" >
< link rel = "icon" type = "image/svg+xml" href = "/theme/image/favicon.svg" > < link rel = "stylesheet" href = "/assets/css/styles.f0961b96.css" >
2025-10-13 03:58:41 +00:00
< script src = "/assets/js/runtime~main.eea8bc29.js" defer = "defer" > < / script >
< script src = "/assets/js/main.5fbdca51.js" defer = "defer" > < / script >
2025-08-13 03:24:27 +00:00
< meta property = "og:image" content = "https://docs.waku.org/_og/fdb4549eb38bf411e407f3e0ffdbe76aa0e8e3d9.png" > < meta name = "twitter:image" content = "https://docs.waku.org/_og/fdb4549eb38bf411e407f3e0ffdbe76aa0e8e3d9.png" > < / head >
2024-02-20 09:23:32 +00:00
< body class = "navigation-with-keyboard" >
2025-08-13 03:24:27 +00:00
< svg xmlns = "http://www.w3.org/2000/svg" style = "display: none;" > < defs >
< symbol id = "theme-svg-external-link" viewBox = "0 0 24 24" > < path fill = "currentColor" d = "M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z" > < / path > < / symbol >
< / defs > < / svg >
< script > ! function ( ) { var t = function ( ) { try { return new URLSearchParams ( window . location . search ) . get ( "docusaurus-theme" ) } catch ( t ) { } } ( ) || function ( ) { try { return window . localStorage . getItem ( "theme" ) } catch ( t ) { } } ( ) ; document . documentElement . setAttribute ( "data-theme" , t || ( window . matchMedia ( "(prefers-color-scheme: dark)" ) . matches ? "dark" : "light" ) ) , document . documentElement . setAttribute ( "data-theme-choice" , t || "system" ) } ( ) , function ( ) { try { const c = new URLSearchParams ( window . location . search ) . entries ( ) ; for ( var [ t , e ] of c ) if ( t . startsWith ( "docusaurus-data-" ) ) { var a = t . replace ( "docusaurus-data-" , "data-" ) ; document . documentElement . setAttribute ( a , e ) } } catch ( t ) { } } ( ) < / script > < div id = "__docusaurus" > < link rel = "preload" as = "image" href = "/theme/image/logo-black.svg" > < link rel = "preload" as = "image" href = "/theme/image/logo.svg" > < style data-emotion = "css-global 3rtehh" > . lsd-button { width : auto ; cursor : pointer ; padding : 6 px 24 px ; } . lsd-button--disabled { cursor : default ; opacity : 0.34 ; } . lsd-button--large { padding : 10 px 40 px ; } . lsd-button--medium { padding : 6 px 24 px ; } . lsd-button--small { padding : 6 px 12 px ; } . lsd-button : hover : not ( . lsd-button--disabled ) . lsd-button__text { -webkit- text-decoration : underline ; text-decoration : underline ; } . lsd-button--with-icon { display : -webkit- box ; display : -webkit- flex ; display : -ms- flexbox ; display : flex ; -webkit- align-items : center ; -webkit- box-align : center ; -ms- flex-align : center ; align-items : center ; } . lsd-button__icon { display : -webkit- box ; display : -webkit- flex ; display : -ms- flexbox ; display : flex ; -webkit- box-pack : center ; -ms- flex-pack : center ; -webkit- justify-content : center ; justify-content : center ; -webkit- align-items : center ; -webkit- box-align : center ; -ms- flex-align : center ; align-items : center ; height : 100 % ; } . lsd-button--large . lsd-button--with-icon { padding : 10 px 0 px 10 px 18 px ; } . lsd-button--large . lsd-button--with-icon . lsd-button__icon { width : 42 px ; } . lsd-button--medium . lsd-button--with-icon { padding : 6 px 0 px 6 px 14 px ; } . lsd-button--medium . lsd-button--with-icon . lsd-button__icon { width : 38 px ; } . lsd-button--small . lsd-button--with-icon { padding : 6 px 0 px 6 px 12 px ; } . lsd-button--small . lsd-button--with-icon . lsd-button__icon { width : 34 px ; } . lsd-button--outlined { background : none ; border : 1 px solid rgb ( var ( - - lsd - border - primary ) ) ; } . lsd-button--outlined . lsd-button__text { color : rgb ( var ( - - lsd - text - primary ) ) ; } . lsd-button--filled { background : rgb ( var ( - - lsd - surface - secondary ) ) ; border : 1 px solid rgb ( var ( - - lsd - border - primary ) ) ; } . lsd-button--filled . lsd-button__text { color : rgb ( var ( - - lsd - text - secondary ) ) ; } < / style > < style data-emotion = "css-global 10bahxd" > . lsd-icon-button { display : -webkit- box ; display : -webkit- flex ; display : -ms- flexbox ; display : flex ; -webkit- flex-direction : row ; -ms- flex-direction : row ; flex-direction : row ; -webkit- align-items : center ; -webkit- box-align : center ; -ms- flex-align : center ; align-items : center ; -webkit- box-pack : center ; -ms- flex-pack : center ; -webkit- justify-content : center ; justify-content : center ; cursor : pointer ; background : none ; padding : 0 ; border : 1 px solid rgb ( var ( - - lsd - border - primary ) ) ; } . lsd-icon-button--filled { background-color : rgb ( var ( - - lsd - icon - primary ) ) ; } . lsd-icon-button--filled svg { --lsd-icon-primary : var ( - - lsd - icon - secondary ) ; } . lsd-icon-button--disabled { opacity : 0.34 ; cursor : default ; } . lsd-icon-button--large { width : 40 px ; height : 40 px ; } . lsd-icon-button--medium { width : 32 px ; height : 32 px ; } . lsd-icon-button--small { width : 28 px ; height : 28 px ; } < / style > < style data-emotion = "css-global icqph9" > . lsd-icon-button-group { display : -webkit- box ; display : -webkit- flex ; display : -ms- flexbox ; display : flex ; -webkit- flex-direction : row ; -ms- flex-direction : row ; flex-direction : row ; } . lsd-icon-button-group--outlined . lsd-icon-button : not ( : last-child ) { border-right : none ; } < / style > < style data-emotion = "css-global 1f43ub2" > b o d y * { f o n t - f a m i l y : v a r ( - - l s d - t y p o g r a p h y - g e n e r i c - f o n t - f a m i l y ) ; } . l s d - t y p o g r a p h y { c o l o r : r g b ( v a r ( - - l s d - t e x t - p r i m a r y ) ) ; } . l s d - t y p o g r a p h y - - s a n s - s e r i f , . l s d - t y p o g r a p h y - - s a n s - s e r i f * { f o n t - f a m i l y : s a n s - s e r i f ; } . l s d - t y p o g r a p h y - - s e r i f , . l s d - t y p o g r a p h y - - s e r i f * { f o n t - f a m i l y : s e r i f ; } . l s d - t y p o g r a p h y - - m o n o s p a c e , . l s d - t y p o g r a p h y - - m o n o s p a c e * { f o n t - f a m i l y : m o n o s p a c e ; } . l s d - t y p o g r a p h y - - d i s p l a y 1 { c o l o r : r g b ( v a r ( - - l s d - t e x t - p r i m a r y ) ) ; f o n t - w e i g h t : v a r ( - - l s d - d i s p l a y 1 - f o n t W e i g h t ) ; f o n t - s i z e : v a r ( - - l s d
2024-02-20 09:23:32 +00:00
.lsd-dropdown--error
) .lsd-dropdown__trigger:hover .lsd-dropdown__option-label,.lsd-dropdown:not(.lsd-dropdown--disabled):not(
.lsd-dropdown--error
2025-10-03 05:55:52 +00:00
) .lsd-dropdown__trigger:focus .lsd-dropdown__option-label{-webkit-text-decoration:underline;text-decoration:underline;}.lsd-dropdown__label{display:block;}.lsd-dropdown__button-container{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;}.lsd-dropdown__trigger{width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;border:none;cursor:pointer;background:none;}.lsd-dropdown__trigger:focus{outline:none;}.lsd-dropdown__option-label{cursor:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.lsd-dropdown__icons{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;gap:8px;}.lsd-dropdown__icon{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.lsd-dropdown__supporting-text{margin:6px 14px;}.lsd-dropdown--error .lsd-dropdown__option-label{-webkit-text-decoration:line-through;text-decoration:line-through;}.lsd-dropdown--disabled{opacity:0.34;cursor:initial;}.lsd-dropdown--large{width:208px;}.lsd-dropdown--large.lsd-dropdown--error{width:230px;}.lsd-dropdown--large .lsd-dropdown__label{margin:0 0 6px 18px;}.lsd-dropdown--large .lsd-dropdown__button-container{height:40px;}.lsd-dropdown--large .lsd-dropdown__trigger{padding:10px 0px 10px 18px;}.lsd-dropdown--large .lsd-dropdown__icons{padding:0px 14px;}.lsd-dropdown--medium{width:188px;}.lsd-dropdown--medium.lsd-dropdown--error{width:210px;}.lsd-dropdown--medium .lsd-dropdown__label{margin:0 0 6px 14px;}.lsd-dropdown--medium .lsd-dropdown__button-container{height:32px;}.lsd-dropdown--medium .lsd-dropdown__trigger{padding:6px 0px 6px 14px;}.lsd-dropdown--medium .lsd-dropdown__icons{padding:0px 12px;}.lsd-dropdown--small{width:164px;}.lsd-dropdown--small.lsd-dropdown--error{width:186px;}.lsd-dropdown--small .lsd-dropdown__label{margin:0 0 6px 12px;}.lsd-dropdown--small .lsd-dropdown__button-container{height:28px;}.lsd-dropdown--small .lsd-dropdown__trigger{padding:6px 0px 6px 12px;}.lsd-dropdown--small .lsd-dropdown__icons{padding:0px 10px;}.lsd-dropdown--outlined .lsd-dropdown__button-container{border:1px solid rgb(var(--lsd-border-primary));}.lsd-dropdown--underlined .lsd-dropdown__button-container{border:1px solid transparent;border-bottom:1px solid rgb(var(--lsd-border-primary));}< / style > < style data-emotion = "css-global w2g5fy" > . l s d - d r o p d o w n - i t e m { w i d t h : 1 0 0 % ; b o x - s i z i n g : b o r d e r - b o x ; d i s p l a y : - w e b k i t - b o x ; d i s p l a y : - w e b k i t - f l e x ; d i s p l a y : - m s - f l e x b o x ; d i s p l a y : f l e x ; - w e b k i t - f l e x - d i r e c t i o n : r o w ; - m s - f l e x - d i r e c t i o n : r o w ; f l e x - d i r e c t i o n : r o w ; - w e b k i t - a l i g n - i t e m s : c e n t e r ; - w e b k i t - b o x - a l i g n : c e n t e r ; - m s - f l e x - a l i g n : c e n t e r ; a l i g n - i t e m s : c e n t e r ; b o r d e r : 1 p x s o l i d r g b ( v a r ( - - l s d - b o r d e r - p r i m a r y ) ) ; } . l s d - d r o p d o w n - i t e m : n o t ( . l s d - d r o p d o w n - i t e m - - d i s a b l e d ) { c u r s o r : p o i n t e r ; } . l s d - d r o p d o w n - i t e m : n o t ( . l s d - d r o p d o w n - i t e m - - d i s a b l e d ) : h o v e r , . l s d - d r o p d o w n - i t e m : n o t ( . l s d - d r o p d o w n - i t e m - - d i s a b l e d ) : f o c u s { o u t l i n e : n o n e ; } . l s d - d r o p d o w n - i t e m : n o t ( . l s d - d r o p d o w n - i t e m - - d i s a b l e d ) : h o v e r . l s d - d r o p d o w n - i t e m _ _ l a b e l , . l s d - d r o p d o w n - i t e m : n o t ( . l s d - d r o p d o w n - i t e m - - d i s a b l e d ) : f o c u s . l s d - d r o p d o w n - i t e m _ _ l a b e l { - w e b k i t - t e x t - d e c o r a t i o n : u n d e r l i n e ; t e x t - d e c o r a t i o n : u n d e r l i n e ; } . l s d - d r o p d o w n - i t e m _ _ l a b e l { d i s p l a y : b l o c k ; o v e r f l o w : h i d d e n ; w h i t e - s p a c e : n o w r a p ; t e x t - o v e r f l o w : e l l i p s i s ; } . l s d - d r o p d o w n - i t e m - - d i s a b l e d { o p a c i t y : 0 . 3 4 ; } . l s d - d r o p d o w n - i t e m _ _ i c o n { m a r g i n - r i g h t : 1 8 p x ; - w e b k i t - f l e x - s h r i n k : 0 ; - m s - f l e x - n e g a t i v e : 0 ; f l e x - s h r i n k : 0 ; } . l s d - d r o p d o w n - i t e m - - s m a l l { p a d d i n g : 5 p x 9 p x ; h e i g h t : 2 8 p x ; } . l
2025-08-13 03:24:27 +00:00
< div class = "theme-admonition theme-admonition-info alert--info admonition_ntHH" > < span class = "admonitionIcon_BGV6" > < svg width = "16" height = "16" viewBox = "0 0 16 16" fill = "none" xmlns = "http://www.w3.org/2000/svg" > < path d = "M7.33334 11.3333H8.66668V7.33331H7.33334V11.3333ZM8.00001 5.99998C8.1889 5.99998 8.34734 5.93598 8.47534 5.80798C8.60334 5.67998 8.66712 5.52176 8.66668 5.33331C8.66668 5.14442 8.60268 4.98598 8.47468 4.85798C8.34668 4.72998 8.18845 4.6662 8.00001 4.66665C7.81112 4.66665 7.65268 4.73065 7.52468 4.85865C7.39668 4.98665 7.3329 5.14487 7.33334 5.33331C7.33334 5.5222 7.39734 5.68065 7.52534 5.80865C7.65334 5.93665 7.81157 6.00042 8.00001 5.99998ZM8.00001 14.6666C7.07779 14.6666 6.21112 14.4915 5.40001 14.1413C4.5889 13.7911 3.88334 13.3162 3.28334 12.7166C2.68334 12.1166 2.20845 11.4111 1.85868 10.6C1.5089 9.78887 1.33379 8.9222 1.33334 7.99998C1.33334 7.07776 1.50845 6.21109 1.85868 5.39998C2.2089 4.58887 2.68379 3.88331 3.28334 3.28331C3.88334 2.68331 4.5889 2.20842 5.40001 1.85865C6.21112 1.50887 7.07779 1.33376 8.00001 1.33331C8.92223 1.33331 9.7889 1.50842 10.6 1.85865C11.4111 2.20887 12.1167 2.68376 12.7167 3.28331C13.3167 3.88331 13.7918 4.58887 14.142 5.39998C14.4922 6.21109 14.6671 7.07776 14.6667 7.99998C14.6667 8.9222 14.4916 9.78887 14.1413 10.6C13.7911 11.4111 13.3162 12.1166 12.7167 12.7166C12.1167 13.3166 11.4111 13.7918 10.6 14.142C9.7889 14.4922 8.92223 14.6671 8.00001 14.6666ZM8.00001 13.3333C9.4889 13.3333 10.75 12.8166 11.7833 11.7833C12.8167 10.75 13.3333 9.48887 13.3333 7.99998C13.3333 6.51109 12.8167 5.24998 11.7833 4.21665C10.75 3.18331 9.4889 2.66665 8.00001 2.66665C6.51112 2.66665 5.25001 3.18331 4.21668 4.21665C3.18334 5.24998 2.66668 6.51109 2.66668 7.99998C2.66668 9.48887 3.18334 10.75 4.21668 11.7833C5.25001 12.8166 6.51112 13.3333 8.00001 13.3333Z" fill = "currentColor" > < / path > < / svg > < / span > < div > < span class = "lsd-typography lsd-typography--body1 admonitionHeading_JPfy" > info< / span > < span class = "lsd-typography lsd-typography--body1 admonitionContent_iozl" > < p > Waku uses libp2p noise encryption for node-to-node connections. However, no default encryption method is applied to the data sent over the network. This design choice enhances Waku' s encryption flexibility, encouraging developers to freely use custom protocols or < a href = "/learn/glossary#waku-message-payload-encryption" > Waku message payload encryption< / a > methods.< / p > < / span > < / div > < / div >
< h2 class = "anchor anchorWithHideOnScrollNavbar_WYt5" id = "installation" > Installation< a href = "#installation" class = "hash-link" aria-label = "Direct link to Installation" title = "Direct link to Installation" > < / a > < / h2 >
< p > Install the required packages for integrating < code > @waku/message-encryption< / code > using your preferred package manager:< / p >
< div class = "tabs-container tabList__CuJ" > < ul role = "tablist" aria-orientation = "horizontal" class = "tabs" > < li role = "tab" tabindex = "0" aria-selected = "true" class = "tabs__item tabItem_LNqP tabs__item--active" > NPM< / li > < li role = "tab" tabindex = "-1" aria-selected = "false" class = "tabs__item tabItem_LNqP" > Yarn< / li > < / ul > < div class = "margin-top--md" > < div role = "tabpanel" class = "tabItem_Ymn6" > < div class = "language-shell codeBlockContainer_EB2s codeBlockContainer_Ckt0 theme-code-block" style = "--prism-color:#F8F8F2;--prism-background-color:rgba(var(--lsd-surface-secondary), 0.08)" > < div class = "codeBlockContent_QJqH" > < pre tabindex = "0" class = "prism-code language-shell codeBlock_bY9V thin-scrollbar" style = "color:#F8F8F2;background-color:rgba(var(--lsd-surface-secondary), 0.08)" > < code class = "codeBlockLines_e6Vv" > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > npm install @waku/message-encryption @waku/utils< / span > < br > < / span > < / code > < / pre > < / div > < / div > < / div > < div role = "tabpanel" class = "tabItem_Ymn6" hidden = "" > < div class = "language-shell codeBlockContainer_EB2s codeBlockContainer_Ckt0 theme-code-block" style = "--prism-color:#F8F8F2;--prism-background-color:rgba(var(--lsd-surface-secondary), 0.08)" > < div class = "codeBlockContent_QJqH" > < pre tabindex = "0" class = "prism-code language-shell codeBlock_bY9V thin-scrollbar" style = "color:#F8F8F2;background-color:rgba(var(--lsd-surface-secondary), 0.08)" > < code class = "codeBlockLines_e6Vv" > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > yarn add @waku/message-encryption @waku/utils< / span > < br > < / span > < / code > < / pre > < / div > < / div > < / div > < / div > < / div >
< h2 class = "anchor anchorWithHideOnScrollNavbar_WYt5" id = "symmetric-encryption" > Symmetric encryption< a href = "#symmetric-encryption" class = "hash-link" aria-label = "Direct link to Symmetric encryption" title = "Direct link to Symmetric encryption" > < / a > < / h2 >
< p > < code > Symmetric< / code > encryption uses a single, shared key for message encryption and decryption. Use the < code > generateSymmetricKey()< / code > function to generate a random symmetric key:< / p >
< div class = "language-js codeBlockContainer_EB2s codeBlockContainer_Ckt0 theme-code-block" style = "--prism-color:#F8F8F2;--prism-background-color:rgba(var(--lsd-surface-secondary), 0.08)" > < div class = "codeBlockContent_QJqH" > < pre tabindex = "0" class = "prism-code language-js codeBlock_bY9V thin-scrollbar" style = "color:#F8F8F2;background-color:rgba(var(--lsd-surface-secondary), 0.08)" > < code class = "codeBlockLines_e6Vv" > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token keyword module" style = "color:rgb(189, 147, 249);font-style:italic" > import< / span > < span class = "token plain" > < / span > < span class = "token imports punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token imports" > generateSymmetricKey < / span > < span class = "token imports punctuation" style = "color:rgb(248, 248, 242)" > }< / span > < span class = "token plain" > < / span > < span class = "token keyword module" style = "color:rgb(189, 147, 249);font-style:italic" > from< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " @waku/message-encryption" < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" style = "display:inline-block" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token comment" style = "color:rgb(98, 114, 164)" > // Generate a random symmetric key< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:rgb(189, 147, 249);font-style:italic" > const< / span > < span class = "token plain" > symmetricKey < / span > < span class = "token operator" > =< / span > < span class = "token plain" > < / span > < span class = "token function" style = "color:rgb(80, 250, 123)" > generateSymmetricKey< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > (< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > )< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ;< / span > < br > < / span > < / code > < / pre > < / div > < / div >
< p > To send encrypted messages, create a < code > Symmetric< / code > message < code > encoder< / code > and send the message as usual:< / p >
< div class = "language-js codeBlockContainer_EB2s codeBlockContainer_Ckt0 theme-code-block" style = "--prism-color:#F8F8F2;--prism-background-color:rgba(var(--lsd-surface-secondary), 0.08)" > < div class = "codeBlockTitle_OeMC" > Sender client< / div > < div class = "codeBlockContent_QJqH" > < pre tabindex = "0" class = "prism-code language-js codeBlock_bY9V thin-scrollbar" style = "color:#F8F8F2;background-color:rgba(var(--lsd-surface-secondary), 0.08)" > < code class = "codeBlockLines_e6Vv" > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token keyword module" style = "color:rgb(189, 147, 249);font-style:italic" > import< / span > < span class = "token plain" > < / span > < span class = "token imports punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token imports" > createEncoder < / span > < span class = "token imports punctuation" style = "color:rgb(248, 248, 242)" > }< / span > < span class = "token plain" > < / span > < span class = "token keyword module" style = "color:rgb(189, 147, 249);font-style:italic" > from< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " @waku/message-encryption/symmetric" < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" style = "display:inline-block" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token comment" style = "color:rgb(98, 114, 164)" > // Create a symmetric message encoder< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:rgb(189, 147, 249);font-style:italic" > const< / span > < span class = "token plain" > encoder < / span > < span class = "token operator" > =< / span > < span class = "token plain" > < / span > < span class = "token function" style = "color:rgb(80, 250, 123)" > createEncoder< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > (< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token literal-property property" > contentTopic< / span > < span class = "token operator" > :< / span > < span class = "token plain" > contentTopic< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < span class = "token comment" style = "color:rgb(98, 114, 164)" > // message content topic< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token literal-property property" > symKey< / span > < span class = "token operator" > :< / span > < span class = "token plain" > symmetricKey< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < span class = "token comment" style = "color:rgb(98, 114, 164)" > // symmetric key for encrypting messages< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > }< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > )< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" style = "display:inline-block" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token comment" style = "color:rgb(98, 114, 164)" > // Send the message using Light Push< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token keyword control-flow" style = "color:rgb(189, 147, 249);font-style:italic" > await< / span > < span class = "token plain" > node< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > .< / span >
< p > To decrypt the messages you receive, create a symmetric message < code > decoder< / code > and process the messages as usual:< / p >
< div class = "language-js codeBlockContainer_EB2s codeBlockContainer_Ckt0 theme-code-block" style = "--prism-color:#F8F8F2;--prism-background-color:rgba(var(--lsd-surface-secondary), 0.08)" > < div class = "codeBlockTitle_OeMC" > Receiver client< / div > < div class = "codeBlockContent_QJqH" > < pre tabindex = "0" class = "prism-code language-js codeBlock_bY9V thin-scrollbar" style = "color:#F8F8F2;background-color:rgba(var(--lsd-surface-secondary), 0.08)" > < code class = "codeBlockLines_e6Vv" > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token keyword module" style = "color:rgb(189, 147, 249);font-style:italic" > import< / span > < span class = "token plain" > < / span > < span class = "token imports punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token imports" > createDecoder < / span > < span class = "token imports punctuation" style = "color:rgb(248, 248, 242)" > }< / span > < span class = "token plain" > < / span > < span class = "token keyword module" style = "color:rgb(189, 147, 249);font-style:italic" > from< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " @waku/message-encryption/symmetric" < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" style = "display:inline-block" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token comment" style = "color:rgb(98, 114, 164)" > // Create a symmetric message decoder< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:rgb(189, 147, 249);font-style:italic" > const< / span > < span class = "token plain" > decoder < / span > < span class = "token operator" > =< / span > < span class = "token plain" > < / span > < span class = "token function" style = "color:rgb(80, 250, 123)" > createDecoder< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > (< / span > < span class = "token plain" > contentTopic< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > symmetricKey< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > )< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" style = "display:inline-block" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token comment" style = "color:rgb(98, 114, 164)" > // Receive messages from a Filter subscription< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token keyword control-flow" style = "color:rgb(189, 147, 249);font-style:italic" > await< / span > < span class = "token plain" > subscription< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > .< / span > < span class = "token method function property-access" style = "color:rgb(80, 250, 123)" > subscribe< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > (< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > [< / span > < span class = "token plain" > decoder< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ]< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > callback< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > )< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" style = "display:inline-block" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token comment" style = "color:rgb(98, 114, 164)" > // Retrieve messages from Store peers< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" sty
< div class = "theme-admonition theme-admonition-tip alert--success admonition_ntHH" > < span class = "admonitionIcon_BGV6" > < svg width = "16" height = "16" viewBox = "0 0 16 16" xmlns = "http://www.w3.org/2000/svg" > < path d = "M8 14.6666C7.63333 14.6666 7.31933 14.536 7.058 14.2746C6.79667 14.0133 6.66622 13.6995 6.66667 13.3333H9.33333C9.33333 13.7 9.20267 14.014 8.94133 14.2753C8.68 14.5366 8.36622 14.6671 8 14.6666ZM5.33333 12.6666V11.3333H10.6667V12.6666H5.33333ZM5.5 10.6666C4.73333 10.2111 4.12489 9.59998 3.67467 8.83331C3.22445 8.06665 2.99956 7.23331 3 6.33331C3 4.94442 3.48622 3.76376 4.45867 2.79131C5.43111 1.81887 6.61156 1.33287 8 1.33331C9.38889 1.33331 10.5696 1.81954 11.542 2.79198C12.5144 3.76442 13.0004 4.94487 13 6.33331C13 7.23331 12.7751 8.06665 12.3253 8.83331C11.8756 9.59998 11.2671 10.2111 10.5 10.6666H5.5ZM5.9 9.33331H10.1C10.6 8.97776 10.9862 8.53887 11.2587 8.01665C11.5311 7.49442 11.6671 6.93331 11.6667 6.33331C11.6667 5.31109 11.3111 4.44442 10.6 3.73331C9.88889 3.0222 9.02222 2.66665 8 2.66665C6.97778 2.66665 6.11111 3.0222 5.4 3.73331C4.68889 4.44442 4.33333 5.31109 4.33333 6.33331C4.33333 6.93331 4.46956 7.49442 4.742 8.01665C5.01444 8.53887 5.40045 8.97776 5.9 9.33331Z" fill = "currentColor" > < / path > < / svg > < / span > < div > < span class = "lsd-typography lsd-typography--body1 admonitionHeading_JPfy" > tip< / span > < span class = "lsd-typography lsd-typography--body1 admonitionContent_iozl" > < p > The symmetric key exchange between users can happen through an < a href = "/learn/glossary#out-of-band" > out-of-band method< / a > . For example, where the key is embedded within the URL shared by a user to access a specific resource.< / p > < / span > < / div > < / div >
< h2 class = "anchor anchorWithHideOnScrollNavbar_WYt5" id = "ecies-encryption" > ECIES encryption< a href = "#ecies-encryption" class = "hash-link" aria-label = "Direct link to ECIES encryption" title = "Direct link to ECIES encryption" > < / a > < / h2 >
< p > < code > ECIES< / code > encryption uses a public key for encryption and a private key for decryption. Use the < code > generatePrivateKey()< / code > function to generate a random < code > ECDSA< / code > private key:< / p >
< div class = "language-js codeBlockContainer_EB2s codeBlockContainer_Ckt0 theme-code-block" style = "--prism-color:#F8F8F2;--prism-background-color:rgba(var(--lsd-surface-secondary), 0.08)" > < div class = "codeBlockContent_QJqH" > < pre tabindex = "0" class = "prism-code language-js codeBlock_bY9V thin-scrollbar" style = "color:#F8F8F2;background-color:rgba(var(--lsd-surface-secondary), 0.08)" > < code class = "codeBlockLines_e6Vv" > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token keyword module" style = "color:rgb(189, 147, 249);font-style:italic" > import< / span > < span class = "token plain" > < / span > < span class = "token imports punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token imports" > generatePrivateKey< / span > < span class = "token imports punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token imports" > getPublicKey < / span > < span class = "token imports punctuation" style = "color:rgb(248, 248, 242)" > }< / span > < span class = "token plain" > < / span > < span class = "token keyword module" style = "color:rgb(189, 147, 249);font-style:italic" > from< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " @waku/message-encryption" < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" style = "display:inline-block" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token comment" style = "color:rgb(98, 114, 164)" > // Generate a random ECDSA private key, keep secure< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:rgb(189, 147, 249);font-style:italic" > const< / span > < span class = "token plain" > privateKey < / span > < span class = "token operator" > =< / span > < span class = "token plain" > < / span > < span class = "token function" style = "color:rgb(80, 250, 123)" > generatePrivateKey< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > (< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > )< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" style = "display:inline-block" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token comment" style = "color:rgb(98, 114, 164)" > // Generate a public key from the private key, provide to the sender< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:rgb(189, 147, 249);font-style:italic" > const< / span > < span class = "token plain" > publicKey < / span > < span class = "token operator" > =< / span > < span class = "token plain" > < / span > < span class = "token function" style = "color:rgb(80, 250, 123)" > getPublicKey< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > (< / span > < span class = "token plain" > privateKey< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > )< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ;< / span > < br > < / span > < / code > < / pre > < / div > < / div >
< p > To send encrypted messages, create an < code > ECIES< / code > message < code > encoder< / code > with the public key and send the message as usual:< / p >
< div class = "language-js codeBlockContainer_EB2s codeBlockContainer_Ckt0 theme-code-block" style = "--prism-color:#F8F8F2;--prism-background-color:rgba(var(--lsd-surface-secondary), 0.08)" > < div class = "codeBlockTitle_OeMC" > Sender client< / div > < div class = "codeBlockContent_QJqH" > < pre tabindex = "0" class = "prism-code language-js codeBlock_bY9V thin-scrollbar" style = "color:#F8F8F2;background-color:rgba(var(--lsd-surface-secondary), 0.08)" > < code class = "codeBlockLines_e6Vv" > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token keyword module" style = "color:rgb(189, 147, 249);font-style:italic" > import< / span > < span class = "token plain" > < / span > < span class = "token imports punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token imports" > createEncoder < / span > < span class = "token imports punctuation" style = "color:rgb(248, 248, 242)" > }< / span > < span class = "token plain" > < / span > < span class = "token keyword module" style = "color:rgb(189, 147, 249);font-style:italic" > from< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " @waku/message-encryption/ecies" < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" style = "display:inline-block" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token comment" style = "color:rgb(98, 114, 164)" > // Create an ECIES message encoder< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:rgb(189, 147, 249);font-style:italic" > const< / span > < span class = "token plain" > encoder < / span > < span class = "token operator" > =< / span > < span class = "token plain" > < / span > < span class = "token function" style = "color:rgb(80, 250, 123)" > createEncoder< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > (< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token literal-property property" > contentTopic< / span > < span class = "token operator" > :< / span > < span class = "token plain" > contentTopic< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < span class = "token comment" style = "color:rgb(98, 114, 164)" > // message content topic< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token literal-property property" > publicKey< / span > < span class = "token operator" > :< / span > < span class = "token plain" > publicKey< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < span class = "token comment" style = "color:rgb(98, 114, 164)" > // ECIES public key for encrypting messages< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > }< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > )< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" style = "display:inline-block" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token comment" style = "color:rgb(98, 114, 164)" > // Send the message using Light Push< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token keyword control-flow" style = "color:rgb(189, 147, 249);font-style:italic" > await< / span > < span class = "token plain" > node< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > .< / span > < spa
< p > To decrypt the messages you receive, create an < code > ECIES< / code > message < code > decoder< / code > with the private key and process the messages as usual:< / p >
< div class = "language-js codeBlockContainer_EB2s codeBlockContainer_Ckt0 theme-code-block" style = "--prism-color:#F8F8F2;--prism-background-color:rgba(var(--lsd-surface-secondary), 0.08)" > < div class = "codeBlockTitle_OeMC" > Receiver client< / div > < div class = "codeBlockContent_QJqH" > < pre tabindex = "0" class = "prism-code language-js codeBlock_bY9V thin-scrollbar" style = "color:#F8F8F2;background-color:rgba(var(--lsd-surface-secondary), 0.08)" > < code class = "codeBlockLines_e6Vv" > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token keyword module" style = "color:rgb(189, 147, 249);font-style:italic" > import< / span > < span class = "token plain" > < / span > < span class = "token imports punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token imports" > createDecoder < / span > < span class = "token imports punctuation" style = "color:rgb(248, 248, 242)" > }< / span > < span class = "token plain" > < / span > < span class = "token keyword module" style = "color:rgb(189, 147, 249);font-style:italic" > from< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " @waku/message-encryption/ecies" < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" style = "display:inline-block" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token comment" style = "color:rgb(98, 114, 164)" > // Create an ECIES message decoder< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:rgb(189, 147, 249);font-style:italic" > const< / span > < span class = "token plain" > decoder < / span > < span class = "token operator" > =< / span > < span class = "token plain" > < / span > < span class = "token function" style = "color:rgb(80, 250, 123)" > createDecoder< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > (< / span > < span class = "token plain" > contentTopic< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > privateKey< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > )< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" style = "display:inline-block" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token comment" style = "color:rgb(98, 114, 164)" > // Receive messages from a Filter subscription< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token keyword control-flow" style = "color:rgb(189, 147, 249);font-style:italic" > await< / span > < span class = "token plain" > subscription< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > .< / span > < span class = "token method function property-access" style = "color:rgb(80, 250, 123)" > subscribe< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > (< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > [< / span > < span class = "token plain" > decoder< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ]< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > callback< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > )< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" style = "display:inline-block" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token comment" style = "color:rgb(98, 114, 164)" > // Retrieve messages from Store peers< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color
< div class = "theme-admonition theme-admonition-tip alert--success admonition_ntHH" > < span class = "admonitionIcon_BGV6" > < svg width = "16" height = "16" viewBox = "0 0 16 16" xmlns = "http://www.w3.org/2000/svg" > < path d = "M8 14.6666C7.63333 14.6666 7.31933 14.536 7.058 14.2746C6.79667 14.0133 6.66622 13.6995 6.66667 13.3333H9.33333C9.33333 13.7 9.20267 14.014 8.94133 14.2753C8.68 14.5366 8.36622 14.6671 8 14.6666ZM5.33333 12.6666V11.3333H10.6667V12.6666H5.33333ZM5.5 10.6666C4.73333 10.2111 4.12489 9.59998 3.67467 8.83331C3.22445 8.06665 2.99956 7.23331 3 6.33331C3 4.94442 3.48622 3.76376 4.45867 2.79131C5.43111 1.81887 6.61156 1.33287 8 1.33331C9.38889 1.33331 10.5696 1.81954 11.542 2.79198C12.5144 3.76442 13.0004 4.94487 13 6.33331C13 7.23331 12.7751 8.06665 12.3253 8.83331C11.8756 9.59998 11.2671 10.2111 10.5 10.6666H5.5ZM5.9 9.33331H10.1C10.6 8.97776 10.9862 8.53887 11.2587 8.01665C11.5311 7.49442 11.6671 6.93331 11.6667 6.33331C11.6667 5.31109 11.3111 4.44442 10.6 3.73331C9.88889 3.0222 9.02222 2.66665 8 2.66665C6.97778 2.66665 6.11111 3.0222 5.4 3.73331C4.68889 4.44442 4.33333 5.31109 4.33333 6.33331C4.33333 6.93331 4.46956 7.49442 4.742 8.01665C5.01444 8.53887 5.40045 8.97776 5.9 9.33331Z" fill = "currentColor" > < / path > < / svg > < / span > < div > < span class = "lsd-typography lsd-typography--body1 admonitionHeading_JPfy" > tip< / span > < span class = "lsd-typography lsd-typography--body1 admonitionContent_iozl" > < p > Users can share their public key through broadcasting or < a href = "/learn/glossary#out-of-band" > out-of-band methods< / a > , such as embedding it in a URL or sending an unencrypted message on another content topic for others to retrieve.< / p > < / span > < / div > < / div >
< h2 class = "anchor anchorWithHideOnScrollNavbar_WYt5" id = "signing-encrypted-messages" > Signing encrypted messages< a href = "#signing-encrypted-messages" class = "hash-link" aria-label = "Direct link to Signing encrypted messages" title = "Direct link to Signing encrypted messages" > < / a > < / h2 >
< p > Message signing helps in proving the authenticity of received messages. By attaching a signature to a message, you can verify its origin and integrity with absolute certainty.< / p >
< div class = "theme-admonition theme-admonition-info alert--info admonition_ntHH" > < span class = "admonitionIcon_BGV6" > < svg width = "16" height = "16" viewBox = "0 0 16 16" fill = "none" xmlns = "http://www.w3.org/2000/svg" > < path d = "M7.33334 11.3333H8.66668V7.33331H7.33334V11.3333ZM8.00001 5.99998C8.1889 5.99998 8.34734 5.93598 8.47534 5.80798C8.60334 5.67998 8.66712 5.52176 8.66668 5.33331C8.66668 5.14442 8.60268 4.98598 8.47468 4.85798C8.34668 4.72998 8.18845 4.6662 8.00001 4.66665C7.81112 4.66665 7.65268 4.73065 7.52468 4.85865C7.39668 4.98665 7.3329 5.14487 7.33334 5.33331C7.33334 5.5222 7.39734 5.68065 7.52534 5.80865C7.65334 5.93665 7.81157 6.00042 8.00001 5.99998ZM8.00001 14.6666C7.07779 14.6666 6.21112 14.4915 5.40001 14.1413C4.5889 13.7911 3.88334 13.3162 3.28334 12.7166C2.68334 12.1166 2.20845 11.4111 1.85868 10.6C1.5089 9.78887 1.33379 8.9222 1.33334 7.99998C1.33334 7.07776 1.50845 6.21109 1.85868 5.39998C2.2089 4.58887 2.68379 3.88331 3.28334 3.28331C3.88334 2.68331 4.5889 2.20842 5.40001 1.85865C6.21112 1.50887 7.07779 1.33376 8.00001 1.33331C8.92223 1.33331 9.7889 1.50842 10.6 1.85865C11.4111 2.20887 12.1167 2.68376 12.7167 3.28331C13.3167 3.88331 13.7918 4.58887 14.142 5.39998C14.4922 6.21109 14.6671 7.07776 14.6667 7.99998C14.6667 8.9222 14.4916 9.78887 14.1413 10.6C13.7911 11.4111 13.3162 12.1166 12.7167 12.7166C12.1167 13.3166 11.4111 13.7918 10.6 14.142C9.7889 14.4922 8.92223 14.6671 8.00001 14.6666ZM8.00001 13.3333C9.4889 13.3333 10.75 12.8166 11.7833 11.7833C12.8167 10.75 13.3333 9.48887 13.3333 7.99998C13.3333 6.51109 12.8167 5.24998 11.7833 4.21665C10.75 3.18331 9.4889 2.66665 8.00001 2.66665C6.51112 2.66665 5.25001 3.18331 4.21668 4.21665C3.18334 5.24998 2.66668 6.51109 2.66668 7.99998C2.66668 9.48887 3.18334 10.75 4.21668 11.7833C5.25001 12.8166 6.51112 13.3333 8.00001 13.3333Z" fill = "currentColor" > < / path > < / svg > < / span > < div > < span class = "lsd-typography lsd-typography--body1 admonitionHeading_JPfy" > info< / span > < span class = "lsd-typography lsd-typography--body1 admonitionContent_iozl" > < p > Signing messages is only possible when encrypted, but if your application does not require encryption, you can generate a symmetric key through hardcoded or deterministic methods using information available to all users.< / p > < / span > < / div > < / div >
< p > The < code > sigPrivKey< / code > parameter allows the < code > Symmetric< / code > and < code > ECIES< / code > message < code > encoders< / code > to sign the message before encryption using an < code > ECDSA< / code > private key:< / p >
< div class = "language-js codeBlockContainer_EB2s codeBlockContainer_Ckt0 theme-code-block" style = "--prism-color:#F8F8F2;--prism-background-color:rgba(var(--lsd-surface-secondary), 0.08)" > < div class = "codeBlockTitle_OeMC" > Alice (sender) client< / div > < div class = "codeBlockContent_QJqH" > < pre tabindex = "0" class = "prism-code language-js codeBlock_bY9V thin-scrollbar" style = "color:#F8F8F2;background-color:rgba(var(--lsd-surface-secondary), 0.08)" > < code class = "codeBlockLines_e6Vv" > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token keyword module" style = "color:rgb(189, 147, 249);font-style:italic" > import< / span > < span class = "token plain" > < / span > < span class = "token imports punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token imports" > generatePrivateKey< / span > < span class = "token imports punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token imports" > getPublicKey < / span > < span class = "token imports punctuation" style = "color:rgb(248, 248, 242)" > }< / span > < span class = "token plain" > < / span > < span class = "token keyword module" style = "color:rgb(189, 147, 249);font-style:italic" > from< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " @waku/message-encryption" < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token keyword module" style = "color:rgb(189, 147, 249);font-style:italic" > import< / span > < span class = "token plain" > < / span > < span class = "token imports punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token imports" > createEncoder < / span > < span class = "token imports keyword module" style = "color:rgb(189, 147, 249);font-style:italic" > as< / span > < span class = "token imports" > createSymmetricEncoder < / span > < span class = "token imports punctuation" style = "color:rgb(248, 248, 242)" > }< / span > < span class = "token plain" > < / span > < span class = "token keyword module" style = "color:rgb(189, 147, 249);font-style:italic" > from< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " @waku/message-encryption/symmetric" < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token keyword module" style = "color:rgb(189, 147, 249);font-style:italic" > import< / span > < span class = "token plain" > < / span > < span class = "token imports punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token imports" > createEncoder < / span > < span class = "token imports keyword module" style = "color:rgb(189, 147, 249);font-style:italic" > as< / span > < span class = "token imports" > createECIESEncoder < / span > < span class = "token imports punctuation" style = "color:rgb(248, 248, 242)" > }< / span > < span class = "token plain" > < / span > < span class = "token keyword module" style = "color:rgb(189, 147, 249);font-style:italic" > from< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " @waku/message-encryption/ecies" < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" style = "display:inline-block" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token comment" style = "color:rgb(98, 114, 164)" > // Generate a random ECDSA private key for signing messages< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token comment" style = "color:rgb(98, 114, 164)" > // ECIES encryption and message signing both use ECDSA keys< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token comment" style = "color:rgb(98, 114 ,
< p > You can extract the < code > signature< / code > and its public key (< code > signaturePublicKey< / code > ) from the < a href = "https://js.waku.org/classes/_waku_message_encryption.DecodedMessage.html" target = "_blank" rel = "noopener noreferrer" > DecodedMessage< / a > and compare it with the expected public key or use the < code > verifySignature()< / code > function to verify the message origin:< / p >
< div class = "language-js codeBlockContainer_EB2s codeBlockContainer_Ckt0 theme-code-block" style = "--prism-color:#F8F8F2;--prism-background-color:rgba(var(--lsd-surface-secondary), 0.08)" > < div class = "codeBlockTitle_OeMC" > Bob (receiver) client< / div > < div class = "codeBlockContent_QJqH" > < pre tabindex = "0" class = "prism-code language-js codeBlock_bY9V thin-scrollbar" style = "color:#F8F8F2;background-color:rgba(var(--lsd-surface-secondary), 0.08)" > < code class = "codeBlockLines_e6Vv" > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token keyword module" style = "color:rgb(189, 147, 249);font-style:italic" > import< / span > < span class = "token plain" > < / span > < span class = "token imports punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token imports" > generatePrivateKey < / span > < span class = "token imports punctuation" style = "color:rgb(248, 248, 242)" > }< / span > < span class = "token plain" > < / span > < span class = "token keyword module" style = "color:rgb(189, 147, 249);font-style:italic" > from< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " @waku/message-encryption" < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token keyword module" style = "color:rgb(189, 147, 249);font-style:italic" > import< / span > < span class = "token plain" > < / span > < span class = "token imports punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token imports" > createEncoder < / span > < span class = "token imports punctuation" style = "color:rgb(248, 248, 242)" > }< / span > < span class = "token plain" > < / span > < span class = "token keyword module" style = "color:rgb(189, 147, 249);font-style:italic" > from< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " @waku/message-encryption/symmetric" < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" style = "display:inline-block" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token comment" style = "color:rgb(98, 114, 164)" > // Generate a random private key for signing messages< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token comment" style = "color:rgb(98, 114, 164)" > // For this example, we' ll call the receiver of the message Bob< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:rgb(189, 147, 249);font-style:italic" > const< / span > < span class = "token plain" > bobPrivateKey < / span > < span class = "token operator" > =< / span > < span class = "token plain" > < / span > < span class = "token function" style = "color:rgb(80, 250, 123)" > generatePrivateKey< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > (< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > )< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" style = "display:inline-block" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token comment" style = "color:rgb(98, 114, 164)" > // Create an encoder that signs messages< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:rgb(189, 147, 249);font-style:italic" > const< / span > < span class = "token plain" > encoder < / span > < span class = "token operator" > =< / span > < span class = "token plain" > < / span > < span class = "token function" style = "color:rgb(80, 250, 123)" > createEncoder< / span > < span class = "token punctuation" style = "co
< h2 class = "anchor anchorWithHideOnScrollNavbar_WYt5" id = "storing-encryption-keys" > Storing encryption keys< a href = "#storing-encryption-keys" class = "hash-link" aria-label = "Direct link to Storing encryption keys" title = "Direct link to Storing encryption keys" > < / a > < / h2 >
< p > We used randomly generated keys for encryption and message signing in the provided examples, but real-world applications require consistent keys among client restarts. Have a look at the < a href = "https://github.com/waku-org/js-waku-examples/tree/master/examples/eth-pm/src/key_pair_handling" target = "_blank" rel = "noopener noreferrer" > Key Pair Handling< / a > example, which demonstrates the secure storage and retrieval of key information from local storage using < a href = "https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto" target = "_blank" rel = "noopener noreferrer" > Subtle Crypto< / a > .< / p >
< p > If you need a simple way to store your keys in hexadecimal format across your application, you can use the < a href = "https://www.npmjs.com/package/@waku/utils" target = "_blank" rel = "noopener noreferrer" > @waku/utils< / a > package:< / p >
< div class = "language-js codeBlockContainer_EB2s codeBlockContainer_Ckt0 theme-code-block" style = "--prism-color:#F8F8F2;--prism-background-color:rgba(var(--lsd-surface-secondary), 0.08)" > < div class = "codeBlockContent_QJqH" > < pre tabindex = "0" class = "prism-code language-js codeBlock_bY9V thin-scrollbar" style = "color:#F8F8F2;background-color:rgba(var(--lsd-surface-secondary), 0.08)" > < code class = "codeBlockLines_e6Vv" > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token keyword module" style = "color:rgb(189, 147, 249);font-style:italic" > import< / span > < span class = "token plain" > < / span > < span class = "token imports punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token imports" > bytesToHex< / span > < span class = "token imports punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token imports" > hexToBytes < / span > < span class = "token imports punctuation" style = "color:rgb(248, 248, 242)" > }< / span > < span class = "token plain" > < / span > < span class = "token keyword module" style = "color:rgb(189, 147, 249);font-style:italic" > from< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " @waku/utils/bytes" < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" style = "display:inline-block" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token comment" style = "color:rgb(98, 114, 164)" > // Generate random symmetric and private keys< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:rgb(189, 147, 249);font-style:italic" > const< / span > < span class = "token plain" > symmetricKey < / span > < span class = "token operator" > =< / span > < span class = "token plain" > < / span > < span class = "token function" style = "color:rgb(80, 250, 123)" > generateSymmetricKey< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > (< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > )< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:rgb(189, 147, 249);font-style:italic" > const< / span > < span class = "token plain" > privateKey < / span > < span class = "token operator" > =< / span > < span class = "token plain" > < / span > < span class = "token function" style = "color:rgb(80, 250, 123)" > generatePrivateKey< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > (< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > )< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" style = "display:inline-block" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token comment" style = "color:rgb(98, 114, 164)" > // Store the keys in hexadecimal format< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:rgb(189, 147, 249);font-style:italic" > const< / span > < span class = "token plain" > symmetricKeyHex < / span > < span class = "token operator" > =< / span > < span class = "token plain" > < / span > < span class = "token function" style = "color:rgb(80, 250, 123)" > bytesToHex< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > (< / span > < span class = "token plain" > symmetricKey< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > )< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:rgb(18
2025-10-03 05:55:52 +00:00
< div class = "theme-admonition theme-admonition-tip alert--success admonition_ntHH" > < span class = "admonitionIcon_BGV6" > < svg width = "16" height = "16" viewBox = "0 0 16 16" xmlns = "http://www.w3.org/2000/svg" > < path d = "M8 14.6666C7.63333 14.6666 7.31933 14.536 7.058 14.2746C6.79667 14.0133 6.66622 13.6995 6.66667 13.3333H9.33333C9.33333 13.7 9.20267 14.014 8.94133 14.2753C8.68 14.5366 8.36622 14.6671 8 14.6666ZM5.33333 12.6666V11.3333H10.6667V12.6666H5.33333ZM5.5 10.6666C4.73333 10.2111 4.12489 9.59998 3.67467 8.83331C3.22445 8.06665 2.99956 7.23331 3 6.33331C3 4.94442 3.48622 3.76376 4.45867 2.79131C5.43111 1.81887 6.61156 1.33287 8 1.33331C9.38889 1.33331 10.5696 1.81954 11.542 2.79198C12.5144 3.76442 13.0004 4.94487 13 6.33331C13 7.23331 12.7751 8.06665 12.3253 8.83331C11.8756 9.59998 11.2671 10.2111 10.5 10.6666H5.5ZM5.9 9.33331H10.1C10.6 8.97776 10.9862 8.53887 11.2587 8.01665C11.5311 7.49442 11.6671 6.93331 11.6667 6.33331C11.6667 5.31109 11.3111 4.44442 10.6 3.73331C9.88889 3.0222 9.02222 2.66665 8 2.66665C6.97778 2.66665 6.11111 3.0222 5.4 3.73331C4.68889 4.44442 4.33333 5.31109 4.33333 6.33331C4.33333 6.93331 4.46956 7.49442 4.742 8.01665C5.01444 8.53887 5.40045 8.97776 5.9 9.33331Z" fill = "currentColor" > < / path > < / svg > < / span > < div > < span class = "lsd-typography lsd-typography--body1 admonitionHeading_JPfy" > Congratulations!< / span > < span class = "lsd-typography lsd-typography--body1 admonitionContent_iozl" > < p > You have successfully encrypted, decrypted, and signed your messages using < code > Symmetric< / code > and < code > ECIES< / code > encryption methods. Have a look at the < a href = "https://github.com/waku-org/js-waku-examples/tree/master/examples/eth-pm" target = "_blank" rel = "noopener noreferrer" > eth-pm< / a > example for a working demo.< / p > < / span > < / div > < / div > < / div > < footer class = "theme-doc-footer docusaurus-mt-lg" > < div class = "row margin-top--sm theme-doc-footer-edit-meta-row" > < div class = "col" > < a href = "https://github.com/waku-org/docs.waku.org/tree/develop/docs/build/javascript/message-encryption.mdx" target = "_blank" rel = "noreferrer noopener" class = "theme-edit-this-page" > < div class = "icon_S7Kx m_thRi" > < svg xmlns = "http://www.w3.org/2000/svg" width = "16" height = "16" fill = "none" viewBox = "0 0 16 16" > < path fill = "#fff" fill-rule = "evenodd" d = "m12.707 2.393.9.9c.526.52.526 1.367 0 1.887L4.787 14H2v-2.787l6.933-6.94 1.887-1.88c.52-.52 1.367-.52 1.887 0M3.333 12.667l.94.04 6.547-6.554-.94-.94-6.547 6.547z" clip-rule = "evenodd" > < / path > < / svg > < / div > < span class = "lsd-typography lsd-typography--body2" > Edit this page< / span > < / a > < / div > < div class = "col lastUpdated_JAkA" > < / div > < / div > < / footer > < / article > < nav class = "docusaurus-mt-lg pagination-nav" aria-label = "Docs pages" > < a class = "pagination-nav__link pagination-nav__link--prev" href = "/build/javascript/store-retrieve-messages" > < div class = "icon_S7Kx m_thRi" > < svg xmlns = "http://www.w3.org/2000/svg" width = "14" height = "14" fill = "none" viewBox = "0 0 14 14" > < path fill = "#fff" d = "M11.667 6.417h-7.1L7.83 3.156 7 2.333 2.334 7 7 11.667l.823-.823-3.255-3.26h7.099z" > < / path > < / svg > < / div > < span class = "lsd-typography lsd-typography--body2 pagination-nav__label" > Retrieve Messages Using Store Protocol< / span > < / a > < a class = "pagination-nav__link pagination-nav__link--next" href = "/build/javascript/use-waku-react" > < span class = "lsd-typography lsd-typography--body2 pagination-nav__label" > Build React DApps Using @waku/react< / span > < div class = "icon_S7Kx m_thRi" > < svg xmlns = "http://www.w3.org/2000/svg" width = "14" height = "14" fill = "none" viewBox = "0 0 14 14" > < path fill = "#fff" d = "m7 2.334-.823.822 3.255 3.26H2.333v1.167h7.1l-3.256 3.261.823.823L11.667 7z" > < / path > < / svg > < / div > < / a > < / nav > < / div > < / div > < div class = "gap1_XuuQ" > < / div > < / div > < / div > < / main > < / div > < / div > < / div > < footer class = "footer" > < div class = "container container-fluid firstRow_ar1q" > < div class = "footer__bottom text--center" > < div class = "margin-bottom--sm" > < a class = "footerLogoLink_BH7S" href = "/" > < img src = "/theme/image/logo.svg" alt = "Waku" class = "themedImage_kfRS themedImage--light_BL8e footer__logo" width = "22" > < img src = "/theme/image/logo.svg" alt = "Waku" class = "themedImage_kfRS themedImage--dark_OvIx footer__
2024-02-20 09:23:32 +00:00
< / body >
< / html >
